How to Take a Screenshot on Google Chrome Using Dev Tools

Anyone can use Chrome's developer tools

by
Molly McLaughlin.
Molly McLaughlin
Senior Content Strategist
Molly K. McLaughlin has been a technology writer since 2004. Her work has appeared on many tech sites across the web including PCMag, Dealnews, Wirecutter and many others.
our editorial process
Molly McLaughlin
Updated on February 02, 2021
reviewed by
Jon Fisher headshot
Jon Fisher
Lifewire Tech Review Board Member
Jonathan Fisher is a CompTIA certified technologist with more than 6 years' experience writing for publications like TechNorms and Help Desk Geek.
our review board
Article reviewed on Mar 08, 2021
Jon Fisher

What to Know

  • On a PC: Press Ctrl + Shift + I then Ctrl + Shift P.
  • Mac: Press Command + Option + I then Command + Shift P.
  • Then type "screenshot" to see the four screenshot options.

This article explains how to capture screenshots in Chrome using developer tools.

How to Use Chrome's Developer Tools to Take Screenshots

The difference between using the Print Screen key and the Chrome tool is that the Chrome screenshot tool doesn't include the Chrome browser window's borders—only the web page's content. If you want to capture only the page content without editing your screenshots, the developer tools can save you a step.

You can use menus or keyboard shortcuts to access the developer tools.

  1. Press Ctrl + Shift + I on a PC, or Command + Option + I on a Mac. Alternatively, click the three-dot menu icon and select More tools > Developer tools. Doing this opens the Element Inspector developer menu, which shows the web page's HTML coding.

    Chrome's screenshot options in developer tools.

  2. Then, press Ctrl + Shift P (PC) or Command + Shift P (Mac) or click the three-dot menu for Customize And Control DevTools and select Run Command.

    Screenshot options in Chrome developer tools.

    For a regular or full size screenshot only, click the three-dot menu icon at the top of the page you want to capture and select Capture screenshot or Capture full size screenshot.

  3. Type "screenshot" to see the screenshot options, which are:

    • Capture area screenshot
    • Capture full size screenshot
    • Capture node screenshot
    • Capture screenshot
    Screenshot options in Chrome developer tools.

  4. Scroll down to select the screenshot type you want to capture using your mouse or the arrow keys on your keyboard.

Chrome Developer Screenshot Options

Select Capture area screenshot to grab part of the screen. Use your mouse to drag a box around the area you want to screenshot.  

To get a screenshot of an entire web page, select Capture full size screenshot. This option lets you get an image of a web page that doesn't fit comfortably on one screen.

This option had mixed results in our testing, depending on the website.

If you want a standard screenshot, choose Capture screenshot, which grabs what's visible on your screen.

Finally, you can get a screenshot of an HTML element by choosing Capture node screenshot.

After you capture a screenshot, you'll get a Save dialog box. Choose a folder and give your screenshot a filename. All screenshots captured using Developer tools are also available in Chrome's download manager.

Was this page helpful?