How to Take a Screenshot on Google Chrome Using Dev Tools

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.

   

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.

   

   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

   

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.

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.