Search on this site

Blog ✌️

Some tools that Chrome DevTools offers for taking screenshots

Some tools that Chrome DevTools offers for taking screenshots


When taking screenshots of websites, we usually resort to other tools, but the browser can help us to do it better.

To take a screenshot, we normally use the Save-downloaded-image hotkey and just extract the image from the downloaded archive by opening it in a file manager of our choice. But now with Chrome DevTools, we can take screenshots without extracting anything 😲.

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:

  • Lightshot
  • FireShot
  • Old reliable Paint with the PrtScn key πŸ§™β™‚οΈ
  • Among others

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 with browser console open

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 with a selected section and browser console open

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

Now let's proceed to type "screenshot":

Screenshot of Google Chrome console commands

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 website

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:
Screenshot of section of website
  • 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 website
  • Capture screenshot, allows us to take a screenshot of the currently visible area of the page:
Screenshot of the visible area of the website

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 πŸ‘¨β€πŸ’»