How to Take a Screenshot on Google Chrome Using Dev Tools GA S REGULAR Menu Lifewire Tech for Humans Newsletter! Search Close GO Internet, Networking, & Security > Browsers

How to Take a Screenshot on Google Chrome Using Dev Tools

Anyone can use Chrome's developer tools

By Molly McLaughlin Molly McLaughlin Senior Editor & Content Strategist Molly K. McLaughlin has been a technology editor and writer for over a dozen years. She runs product reviews for Lifewire, overseeing the process from hands-on testing to publishing. lifewire's editorial guidelines Updated on March 8, 2021 Reviewed by Jon Fisher Reviewed by Jon Fisher Wichita Technical Institute Jonathan Fisher is a CompTIA certified technologist with more than 6 years' experience writing for publications like TechNorms and Help Desk Geek. lifewire's editorial guidelines Tweet Share Email Tweet Share Email Browsers Chrome Safari Firefox Microsoft

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. Other Ways to Screenshot on Chrome 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. 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. Type "screenshot" to see the screenshot options, which are: Capture area screenshotCapture full size screenshotCapture node screenshotCapture screenshot 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? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit More from Lifewire How to Screenshot on Microsoft Edge How to Take a Screenshot on PS5 How to View the HTML Source in Google Chrome How to Take a Screenshot on a PC How to Take a Screenshot on LG Smartphones How to Save Web Pages in Google Chrome How to Activate Full-Screen Mode in Google Chrome The 7 Best Screen Capture Software of 2022 How to Print Web Pages in Google Chrome How to Use Firefox's Privacy and Security Features How to Turn on Incognito Mode in Your Browser How to Clear Internet Cache in Every Major Browser What Is the Google Chrome Browser? Search History: How to View or Delete It How to View Blurred Text on Websites How to Take a Screenshot on Android Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookies Settings Accept All Cookies