How to screenshot using Google Chrome’s Developer Tools
Today’s tutorial is likely to bring tears of joy to the eyes of us that have long struggled with capturing full screenshots of web pages.
Of course, whether Windows or Mac, capturing a screenshot of displayed content is easy. A simple press of the PrtScr button in Windows or if using a Mac, then simple press 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 advance 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 full size screenshot of entire artifact displayed
- Capture node screenshot – capture a certain HTML/DOM element in web browser display.
- Capture screenshot – captures only what is displayed in viewing pane of web browser
While aforementioned screenshot tools do the job, they can also take up quite a bit of space and, in some instances, hit your wallet quite heavy due to limited freemium features.
Nevertheless, the one of many added benefits with 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 strategy’s that grow your business and brand.