How to screenshot on Google Chrome
When it comes to explaining features or workflows to our coworkers or simply remembering something for later, screenshots are invaluable.
Just hit Shift + ⌘ + 3 (or 4 or 5) on your Mac and in just a few seconds you can show something that would take minutes to explain in writing.
Since Google Chrome is by far the most popular browser, we’d expect to use some sort of a Chrome screenshot tool or an amazing snipping tool Chrome team could come up with, but at the first glance there’s none.
So is there a way to screen capture Chrome natively, such as a Chrome full-screen shortcut of the website you’re visiting, for example? Let’s explore.
Why take a screenshot on Chrome?
Some might wonder what’s the need to learn how to screenshot on Google Chrome if Mac has built-in screenshot options?
A few reasons. First, it’s often beneficial for your workflow to do everything within a single app, without taking your fingers off the keyboard or switching contexts. Second, Mac’s default screenshot tool is missing a few useful browser options, such as taking a screenshot of the whole scroll of the page and taking screenshots of precise visible areas without having to drag over them.
So a well-hidden secret is that there is a snipping tool Chrome is keeping within its DevTools area, and it’s quite robust and flexible once you learn how to use it. Another benefit: the Chrome screenshot tool works the same across all operating systems, so whether you’re using Windows, macOS, or Chrome OS, the screen capture Chrome selection remains the same.
There are three useful ways to take a screenshot on Chrome.
How to use Chrome screenshot shortcuts
As mentioned above, Chrome developers decided to tuck away all the snipping tool Chrome functionality in DevTools, which is an extensive and powerful platform used by most web developers worldwide. So we can say that the Chrome team developed its screenshot features as pro tools.
Note: Make sure to use the commands that follow precisely. Messing with DevTools can lead to unexpected changes in your browser’s behavior.
So to learn how to full-screen Chrome or just take a regular screenshot:
- Open DevTools by going to View ➙ Developer ➙ Developer Tools (Option + ⌘ + I)
- Go to ellipses menu ➙ Run command (Shift + ⌘ + P)
- Type “screenshot”
- Select the type of screenshot your want to take: area, full size, node, or regular
Your Chrome screenshot will be saved in your regular destination folder, which in Google Chrome is Downloads by default.
Sometimes, however, you do need to go a step further than Google Chrome and use a pro-level tool for taking screenshots that works in every app.
CleanShot is the ultimate recording app for Mac. Not only does it cover all the regular macOS screenshot features, it also allows you to take precise scrolling captures of websites or apps, set screenshots on a timer, and record your screen. What’s more, CleanShot automatically hides all your desktop icons, saves your images in the cloud for easy sharing, and lets you annotate your captures on the fly.
Using CleanShot is dead simple: the app is always easily accessible in your menu bar, so just click on its icon and choose the type of a screenshot you want. For even easier access, you can set CleanShot to be a default image capture tool on your Mac.
How to screenshot on Chrome with the Device Emulator
Another big benefit of using a snipping tool Chrome provides is that you can run it through its Device Emulator to represent a mobile screen, for example, without using your phone. And you can even specify precisely the device you’d like to display, which is perfect for creating design mockups or just testing your existing website.
To take a Chrome screenshot with the Device Emulator:
- Launch Chrome
- Open DevTools with Option + ⌘ + I shortcut
- Click on the second icon in the DevTools top bar called “Toggle device toolbar” (Shift + ⌘ + M)
- Use the dropdown menu to specify the device
- Run command (Shift + ⌘ + P) and search for “screenshot”
- Take the screenshot of your choice
How to use a snipping tool Chrome extension
The last way for how to full screen Chrome or take any kind of screenshots is to leverage Chrome’s massive library of extensions, which include lots of screen-grabbing tools as well.
To download a Chrome extension:
- Go to Window ➙ Extensions
- In the menu, select Open Chrome Web Store
- Search “screenshot”
- Pick a tool of your choice (we recommend Lightshot)
- Click Add to Chrome
Then, click on the extension any time you want to use it, select appropriate options, and take screenshots right within the Chrome browser.
If you’d like to take screenshots by using a browser, but also want more flexibility than Chrome affords, you can use a Mac screenshot app that has its own browser built right into it.
Capto is a truly multi-functional app. From the one side, it’s a professional-level screen recording, from the other, it’s a capable video editor. Using Capto’s top bar menu, you can take screen, area, menu, or window screenshots, record videos, and capture images right from Capto’s browser:
- In Capto, click on Web ➙ Snap from Capto Browser
- Search for a URL
- Then choose to snap an area, scrolling motion, or even DOM elements
As you can see, learning how to screenshot on Google Chrome takes just a few minutes. You can do it with a built-in tool, use a Device Emulator, or download an extension. But the best results and functionality will always remain with Mac apps, such as CleanShot for all-around powerful snaps or Capto for taking images of browser elements.
Best of all, CleanShot and Capto are both available to you absolutely free for seven days through the trial of Setapp, a platform with more than 220 world-class Mac and iPhone apps for any task you can imagine, from optimizing your Mac (CleanMyMac X) to editing photos (CameraBag Pro). Try every Setapp app today at no cost and feel the power of having the best Mac tools accessible at any time.