Blog โ๏ธ
![Some tools that Chrome DevTools offers for taking screenshots](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fbanner.png&width=656&height=370&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
![Daniel Esteves](/api/image?src=%2Fme-transparent.png&width=160&height=160&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
Some tools that Chrome DevTools offers for taking screenshots
Published
When taking screenshots of websites, we usually resort to other tools, but the browser can help us to do it better.
Did you know that we can take screenshots from the browser without extensions?
Normally when we need to take full-size website screenshots of the whole site or we want to capture a particular area we use tools like:
But now Chrome DevTools gives us a better way to take such screenshots for any purpose ๐คฉ.
First I'll explain what Chrome DevTools (and the DevTools of other browsers in general) are for:
- You can inspect the code of a website to customize it and move it around to your liking to make quicker edits and then move on to the code ๐.
- We can see in the console if there are any errors with our code or to debug movements of our application or site โ ๏ธ
- We can see in the "Network" tab all the requests that our site makes about images, styles, scripts and much more ๐ถ
- Inclusive from the DevTools we can see the page on different devices like 4K, Laptop, iPad, iPhone and much more ๐ฑ
But in this precise post we are going to talk about screenshots, in other posts we are going to address more in depth how we can take advantage of this amazing tool provided by browsers.
How to open Chrome DevTools?
We open our Chrome browser and press the following:
- On Mac: fn + F12
- On Windows: F12
- On Linux: F12
We will find this window that opens on the page we want:
![Screenshot of danestves.com with browser console open](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fimage-1.png&width=1920&height=899&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
As we can see on the left the code is displayed and on the right we can see the classes that has the element which we can modify any CSS we want, changing colors, sizes and everything we can think of directly from the browser; in later posts I will discuss how I do to layout sites using first the DevTools and then going to code.
Now we are going to stop on any element using the mouse and we will be able to see all its properties.
How to take screenshots?
Now that we have selected some element, in my case the part of the text with buttons at the top of my page
![Screenshot of danestves.com with a selected section and browser console open](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fimage-2.png&width=1920&height=513&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
Let's press the following keys:
- On Mac: โ + Shift + P
- On Windows: Ctrl + Shift + P
- On Linux: Ctrl + Shift + P
This will open the following options:
![Screenshot of Google Chrome console commands](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fimage-3.png&width=710&height=410&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
Now let's proceed to type "screenshot":
![Screenshot of Google Chrome console commands](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fimage-4.png&width=832&height=336&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
With the item already selected and the command we typed we are going to click on the option that says "Capture node screenshot" and we would get something like this:
![Screenshot of section of danestves.com website](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fimage-5.png&width=590&height=249&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
Magical isn't it? Without installing anything we can take screenshots of exactly what a section of a website looks like to display. Now let's explore the other sections:
- Capture area screenshot, lets us choose in proportions how we want to take our screenshot:
![Vertical screenshot of the danestves.com website](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fimage-6.png&width=125&height=490&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
- Capture full size screenshot, allows us to take a screenshot of the entire web site, but be careful, it will take the screenshot depending on the width of the screen at that moment:
![Full-size screenshot type screenshot from danestves.com website](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fimage-7.png&width=1091&height=2647&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
- Capture screenshot, allows us to take a screenshot of the currently visible area of the page:
![Screenshot of the visible area of the danestves.com website](/api/image?src=%2Fimg%2Fblog%2Fsome-tools-that-chrome-devtools-offers-for-taking-screenshots%2Fimage-8.png&width=1091&height=842&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0&quality=80&compressionLevel=9&loop=0&delay=100&crop=null&contentType=image%2Fwebp)
Great! Now we have a way to take screenshots of websites without having to install anything and taking advantage of our browser ๐
If you have any doubts don't forget that down here there is a discussion section where I can help you with any problem you have following this post.
You know, see you at code ๐จโ๐ป