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.
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.
Capture area screenshotCapture full size screenshotCapture node screenshotCapture 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.
