← Back to Blog

How to Screenshot in Chrome: 5 Easy Methods (2026)

March 7, 202612 min read
Morgan
Morgan
Indie Developer

# How to Take a Screenshot in Google Chrome: 5 Easy Methods That Actually Work

Taking a screenshot in Google Chrome lets you capture any webpage — a full page, a specific element, or a selected area — without installing anything extra. Chrome has built-in screenshot tools most people don't know about, plus your Mac's native shortcuts work perfectly alongside them.

How to take a screenshot in Google Chrome on Mac
How to take a screenshot in Google Chrome on Mac

Here's the quick version: press ⌘ + Shift + 4 to capture any part of your screen, or use Chrome DevTools (⌘ + Shift + I → Run command → "Screenshot") for full-page captures. Keep reading for all five methods with step-by-step instructions.

Use Mac keyboard shortcuts to capture Chrome

The fastest way to take a screenshot in Google Chrome on Mac is with keyboard shortcuts you already have. These work in any app, not just Chrome.

Mac keyboard shortcuts for Chrome screenshots
Mac keyboard shortcuts for Chrome screenshots

Capture a selected area

  1. Press ⌘ + Shift + 4.
  2. Your cursor turns into a crosshair.
  3. Click and drag to select the area of the Chrome window you want to capture.
  4. Release to save the screenshot.

The image lands on your Desktop by default. You can change where screenshots go if you prefer a different folder.

Capture the entire Chrome window

  1. Press ⌘ + Shift + 4, then hit Spacebar.
  2. Your cursor changes to a camera icon.
  3. Hover over the Chrome window and click.

This captures the window with a drop shadow. Hold Option while clicking to remove the shadow.

Capture the full screen

Press ⌘ + Shift + 3 to screenshot everything on your display, including Chrome and any other visible windows.

Pro tip: If you want to capture just a specific part of the screen, the area selection method gives you the most control.

How to screenshot in Chrome using DevTools (full-page capture)

Most screenshot methods only capture what's visible on screen. Chrome DevTools lets you capture an entire scrolling webpage — every pixel from top to bottom.

Chrome DevTools screenshot capture options
Chrome DevTools screenshot capture options

Full-page screenshot using the command menu

  1. Open DevTools with ⌘ + Option + I (or right-click → Inspect).
  2. Press ⌘ + Shift + P to open the Command Menu.
  3. Type screenshot — you'll see four options appear.
  4. Select Capture full size screenshot.

Chrome saves the full-page image as a PNG to your Downloads folder. This works for pages of any length, even ones with hundreds of scrolling sections.

The file name follows Chrome's default pattern: screenshot-timestamp].png. If the page is very long, the image can be thousands of pixels tall — great for sharing with your team, but you may want to [crop it before using it in docs.

Capture just the visible area

Follow the same steps, but choose Capture screenshot instead. This grabs exactly what you see in the browser viewport — useful when you need a clean capture without the Mac window chrome.

Screenshot a specific HTML element

This is a hidden gem most guides skip:

  1. Open DevTools (⌘ + Option + I).
  2. Click the Select element tool (top-left arrow icon) or press ⌘ + Shift + C.
  3. Click the element you want to capture on the page.
  4. In the Elements panel, right-click the highlighted element.
  5. Choose Capture node screenshot.

This captures that exact element — a button, an image, a card — with no extra whitespace. It's perfect for grabbing logos, UI components, or specific sections for design reviews or bug reports.

According to Chrome's official DevTools documentation, you can also screenshot nodes larger than the screen size, which is handy for long lists or expanded menus.

Capture a specific area with DevTools

There's also an area screenshot option in the Command Menu:

  1. Open the Command Menu (⌘ + Shift + P).
  2. Type screenshot and select Capture area screenshot.
  3. A crosshair appears — click and drag to select the area.
  4. Chrome saves the selected region as a PNG.

This is similar to the Mac ⌘ + Shift + 4 shortcut, but it only captures the webpage content — no browser toolbar, tabs, or bookmarks bar. Use it when you need a clean shot of the page itself without any browser UI in the frame.

DevTools screenshot tips

  • Change the viewport first. Click the device toolbar icon (⌘ + Shift + M) and pick a screen size like iPhone or iPad. Then take a full-page screenshot to get a mobile version of the page.
  • Disable CSS animations. Open the Animations panel in DevTools and pause all animations before capturing. This prevents half-rendered states in your screenshot.
  • Use the console for batch captures. If you need screenshots of multiple pages, write a small script that navigates to each URL and calls the screenshot command. This saves time for QA and documentation tasks.

Use Chrome's built-in sharing and screenshot tool

Chrome has a lesser-known screenshot feature built right into the address bar — no DevTools required.

  1. Click the Share icon in Chrome's address bar (or go to the three-dot menu → More tools).
  2. Look for the Screenshot option.
  3. Select the area you want to capture.
  4. Chrome lets you copy the screenshot to your clipboard or save it.

This method is convenient for quick captures when you don't need the full power of DevTools. The captured image gets copied to your clipboard, so you can paste it directly into Slack, email, or a document.

Note: This feature may appear under different menu locations depending on your Chrome version. If you don't see it, make sure Chrome is updated to the latest version.

Capture and annotate Chrome screenshots with a dedicated tool

Mac shortcuts and DevTools handle basic captures well, but they lack annotation and sharing features. If you regularly screenshot Chrome pages for bug reports, documentation, or social media, a dedicated tool saves significant time.

ScreenSnap Pro captures any Chrome content and immediately lets you annotate with arrows, text, blur sensitive data, and add professional backgrounds to your screenshots. You can share via a cloud link in seconds — no saving, uploading, and pasting URLs separately.

Here's how the workflow looks:

  1. Use the keyboard shortcut to capture any Chrome area.
  2. The annotation overlay appears instantly — add arrows, highlight, or blur sensitive information.
  3. Click share to get a link, or save locally.

For technical documentation or editing screenshots on Mac, having annotation built into the capture flow makes a real difference versus screenshotting first and opening a separate image editor.

Use a Chrome extension for screenshots

If you prefer keeping everything inside the browser, Chrome extensions offer screenshot tools directly in your toolbar.

Here are the most popular options, with honest pros and cons:

GoFullPage

The simplest choice — click the icon and it scrolls the entire page, stitching everything into one tall image. It's free, lightweight, and does one thing well. The downside: no annotation tools. You get the raw image and have to edit it elsewhere.

  • Price: Free
  • Best for: Quick full-page captures with no fuss

Awesome Screenshot

A more complete toolkit that handles capture, annotation, and even screen recording. You can add arrows, text, and blur regions right inside Chrome. The free tier covers basic screenshots, but recording and cloud storage need a paid plan.

Nimbus Screenshot

Offers scrolling capture, a built-in editor, and direct uploads to Google Drive or Slack. It's feature-rich but heavier than GoFullPage. Some users report it slows down Chrome on older machines.

  • Price: Free tier, Pro at $5/month
  • Best for: Users who need cloud integration and editing in one place

How to install a screenshot extension

  1. Visit the Chrome Web Store.
  2. Search for "screenshot."
  3. Click Add to Chrome on your preferred extension.
  4. Pin the extension to your toolbar for quick access.

The tradeoff: Extensions only work inside Chrome. Mac-native tools like keyboard shortcuts and ScreenSnap Pro work across all apps — Chrome, Safari, Finder, anything on your screen.

Comparison: which Chrome screenshot method should you use?

Comparing Chrome screenshot methods
Comparing Chrome screenshot methods
MethodFull pageAnnotationWorks outside ChromeSpeed
Mac keyboard shortcuts⚡ Fastest
DevTools command menuModerate
DevTools node capture❌ (element only)Moderate
Chrome sharing toolBasicFast
Chrome extensionVariesFast
ScreenSnap Pro✅ Full toolkit⚡ Fast

Quick decision guide:

  • Need a fast capture?⌘ + Shift + 4 (Mac shortcut)
  • Need the entire page? → DevTools full-page screenshot
  • Need to annotate and share? → ScreenSnap Pro or extension
  • Need a specific element? → DevTools node screenshot
  • Need to crop a screenshot after capture? → Mac Preview or ScreenSnap Pro

Tips for better Chrome screenshots

Remove clutter before capturing

Press ⌘ + Shift + F to toggle Chrome's full-screen mode, hiding the bookmark bar and tabs. This gives you a cleaner capture. You can also press F11 or use the View menu.

Capture at the right resolution

Chrome DevTools lets you simulate different screen sizes. Open DevTools, click the device toolbar icon (⌘ + Shift + M), and choose a resolution. Your full-page screenshot reflects that size — great for capturing mobile views of a website.

Save in the right format

Mac screenshots save as PNG by default, which is high quality but large. If you need smaller files for web use, you can convert the format or use our free image compressor to reduce file size without losing clarity.

Copy to clipboard instead of saving

Press ⌘ + Shift + 4 + Control to copy your screenshot directly to the clipboard instead of saving a file. Then paste with ⌘ + V wherever you need it. Learn more in our screenshot to clipboard guide.

Handle cookie banners and popups

Cookie consent banners ruin screenshots. Before capturing, either:

  • Click "Accept" to dismiss the banner
  • Open DevTools, find the banner element, and delete the node (right-click → Delete element)
  • Use an extension like "I don't care about cookies" to auto-dismiss them

This makes a big difference for clean, professional captures — especially for technical documentation or client presentations.

Capture Chrome on a timer

Sometimes you need to screenshot a hover state, dropdown menu, or tooltip that disappears when you move your mouse. On Mac:

  1. Open the Screenshot app with ⌘ + Shift + 5.
  2. Click Options and set a 5 or 10-second timer.
  3. During the countdown, hover over the element you want to capture.
  4. The screenshot fires automatically while the hover state is visible.

This trick works in Chrome and every other Mac app. It's also useful for capturing right-click context menus without the menu closing.

Use Chrome's Print to PDF as an alternative

If you need a full-page capture as a PDF rather than an image:

  1. Press ⌘ + P to open the print dialog.
  2. Set the destination to Save as PDF.
  3. Adjust margins and scale as needed.
  4. Click Save.

This gives you a vector-quality document of the page. It's better than a screenshot when you need the text to remain selectable — great for saving articles, receipts, or invoices. If you later need an image version, use our free PDF to image converter.

Frequently Asked Questions

How do I take a full-page screenshot in Chrome without an extension?

Open Chrome DevTools with ⌘ + Option + I, then press ⌘ + Shift + P and type "screenshot." Select Capture full size screenshot. Chrome saves the entire page as a PNG to your Downloads folder — no extension needed.

Can I screenshot a specific element on a webpage?

Yes. Open DevTools, use the element selector (⌘ + Shift + C), click the element, then right-click it in the Elements panel and choose Capture node screenshot. This gives you a pixel-perfect capture of just that element.

Why are my Chrome screenshots blurry?

Chrome screenshots may appear blurry if you're on a non-Retina display or if DevTools is set to a low-resolution device mode. Make sure your display is at native resolution, and if using DevTools device simulation, set the DPR (Device Pixel Ratio) to 2 or higher.

Does Chrome have a built-in screenshot tool?

Yes. Chrome offers screenshot options through both the DevTools Command Menu and the Share menu in the address bar. The DevTools method is more powerful, offering full-page, viewport, area, and node-level captures.

What's the difference between a screenshot and a screen recording in Chrome?

A screenshot captures a single still image of your screen or webpage. A screen recording captures video over time. For recording your Chrome activity, check out our guide on how to record GIFs on Mac — GIFs are perfect for short demos and bug reports.

Ready to upgrade your screenshots?

Try ScreenSnap Pro with our 30-day money-back guarantee.

Get ScreenSnap Pro