How-To Guide

How to screenshot using Google Chrome’s Developer Tools.

April 17, 2019 by Alvin Brown No Comments

Today’s tutorial will likely bring joy to the eyes of us who have long struggled with capturing full screenshots of web pages.

Of course, capturing a screenshot of the displayed content is easy, whether on Windows or Mac. Press the PrtScr button in Windows or, if using a Mac, press the Shift+Command+3 keys.

And if these options are too complex, then there are a slew of browser add-ons and 3-party applications and software to capture simple and advanced screenshots.

But did you know that Google Chrome actually offers an easy-to-use, built-in functionality in Developer Tools that allows for the following?

Capture area screenshot – captures an area of web browser display based on user preference.
Capture full-size screenshot – captures a full-size screenshot of an entire artifact displayed.
Capture node screenshot – capture a certain HTML/DOM element in web browser display.
Capture screenshot – captures only what is displayed in the viewing pane of a web browser.

I’ve long used tools like SnagIt, Full Page Screenshot (Chrome add-on), and Awesome Screenshot to capture a number of screenshots when developing, reporting, and solving technical challenges.

While the aforementioned screenshot tools do the job, they can also take up quite a bit of space and sometimes hit your wallet quite heavily due to limited freemium features.

Nevertheless, one of the many added benefits of using Developer Tools’ built-in screen capture functionality is that it’s not an additional software if you’re already running Chrome as your web browser.

And if you’re not running Chrome as your browser of choice, then shame on you, and you better install it right now. 😀

After you install Chrome, then watch this quick tutorial video as I share with you all the ways to capture a screenshot using Google Chrome’s Developer Tools.

In closing, don’t be afraid to contact me with questions about capturing screenshots or general questions about planning and executing digital strategies that grow your business and brand.

Please subscribe to my YouTube channel to receive tutorial alerts.

Written by Alvin Brown

He's an experienced and passionate serial entrepreneur, founder and publisher of Kickstart Commerce. Alvin possesses a great love for startups dominating their market using profitable digital strategies for greater commerce.