Swimburger

Hidden Gem: Take screenshots using built-in commands in Chrome/Edge

Niels Swimberghe

Niels Swimberghe - - Web

Follow me on Twitter, buy me a coffee

Microsoft Edge and Google Chrome logo + Hidden gem: screenshots

Chromium browsers such as Chrome and Edge have many lesser known features. One of those features is the ability to take screenshots of your current tab content.
There are 4 different screenshot commands:

These commands are even more powerful when you combine them with the device toolbar which let's you emulate different devices and resolutions.

Capture area screenshot #

The 'Capture area screenshot' will allow you to draw a square on your web page which will then be exported as a PNG-file. This is basically a lite-version of the 'Snipping tool' or 'Snip & Sketch' application.
This is how to use 'Capture area screenshot':

  1. Open DevTools by pressing F12, ctrl+shift+i, or by opening the menu > More Tools > Developer tools.
    Screenshot of opening DevTools using menu > More Tools > Developer Tools
  2. Next, open the 'Run command' window by pressing ctrl+shift+p or by opening the menu inside of the DevTools window, click 'Run command'.
    Screenshot of the DevTools submenu to open the Run Command menu
  3. Type 'Screenshot' and select 'Capture area screenshot'.
    Screenshot of running Capture area screenshot in DevTools
  4. Focus back onto the web page and draw a rectangle by left-clicking and dragging the mouse.
    Screenshot of drawing an area to screenshot
  5. Now the browser will automatically save the screenshot to disk or prompt you for a location to store it.

Capture full size screenshot #

The 'Capture full size screenshot' will take a screenshot of the entire webpage for you, including the content that's off-screen which you would normally have to scroll for. This is by far the most useful screenshot command as it is really hard to do manually.
This is how to use 'Capture full size screenshot':

  1. Open DevTools by pressing F12, ctrl+shift+i, or by opening the menu > More Tools > Developer tools.
    Screenshot of opening DevTools using menu > More Tools > Developer Tools
  2. Next, open the 'Run command' window by pressing ctrl+shift+p or by opening the menu inside of the DevTools window, click 'Run command'.
    Screenshot of the DevTools submenu to open the Run Command menu
  3. Type 'Screenshot' and select 'Capture full size screenshot'.
    Screenshot of running Capture full size screenshot in DevTools
  4. Now the browser will automatically save the screenshot to disk or prompt you for a location to store it.

Capture node screenshot #

The 'Capture node screenshot' will take a screenshot of the HTML Node you focused on in the DevTools.
This is how to use 'Capture node screenshot':

Chrome/Edge version 86 introduced an easier way to capture node screenshots:

  1. Open DevTools by pressing F12, ctrl+shift+i, or by opening the menu > More Tools > Developer tools.
    Screenshot of opening DevTools using menu > More Tools > Developer Tools
  2. Next, select the HTML node you want to take a screenshot of in the 'Elements' tab.
  3. Right-click the node and click "Capture node screenshot" in the context menu.
    Screenshot of clicking "Capture node screenshot" in node context menu
  4. Now the browser will automatically save the screenshot to disk or prompt you for a location to store it.

This is the alternative way to capture node screenshot which is available pre-86 Chrome/Edge:

  1. Open DevTools by pressing F12, ctrl+shift+i, or by opening the menu > More Tools > Developer tools.
    Screenshot of opening DevTools using menu > More Tools > Developer Tools
  2. Next, select the HTML you want to take a screenshot of in the 'Elements' tab.

    If you skip this step, nothing will happen when running the screenshot command and no warning will be shown.

  3. Open the 'Run command' window by pressing ctrl+shift+p or by opening the menu inside of the DevTools window, click 'Run command'.
    Screenshot of the DevTools submenu to open the Run Command menu
  4. Type 'Screenshot' and select 'Capture node screenshot'.
    Screenshot of running Capture node screenshot in DevTools
  5. Now the browser will automatically save the screenshot to disk or prompt you for a location to store it.

Capture screenshot #

The 'Capture screenshot' will take a screenshot of the viewport. With other words, everything of the website that is visible inside the browser.
This is how to use 'Capture screenshot':

  1. Open DevTools by pressing F12, ctrl+shift+i, or by opening the menu > More Tools > Developer tools.
    Screenshot of opening DevTools using menu > More Tools > Developer Tools
  2. Open the 'Run command' window by pressing ctrl+shift+p or by opening the menu inside of the DevTools window, click 'Run command'.
    Screenshot of the DevTools submenu to open the Run Command menu
  3. Type 'Screenshot' and select 'Capture screenshot'.
    Screenshot of running Capture screenshot in DevTools
  4. Now the browser will automatically save the screenshot to disk or prompt you for a location to store it.

Taking screenshots while emulating devices #

Chromium browsers also have powerful tools to simulate other devices such as mobiles phones, tablets, and computers with different resolutions. Combining this with the screenshot commands allows you to quickly take screenshots of what it would look like on a particular device.

Even if your own machine's resolution is lower than the simulated device, the screenshots will be in the resolution of the simulated device. This basically means you can take screenshots in higher resolution than your own screen!

To start simulating devices, click on the 'Toggle device toolbar' button in the DevTools:

Screenshot of Chrome DevTools clicking on 'Toggle device manager' button

Change the simulated device to an iPad Pro:

Screenshot of device manager selecting iPad Pro simulation

Now run a screenshot command and inspect the resolution of the screenshot. Even though the screen used in this tutorial is only 1920x1080 pixels, the screenshot taken while simulating iPad Pro is 2732x2048 pixels.

Related Posts

Related Posts