How to Capture a Screenshot of a Google Chrome Tab

Quick answer: For a clean screenshot of a webpage in Google Chrome, open DevTools with Ctrl+Shift+I (Windows/Linux) or Command+Option+I (macOS). Open the device toolbar, select More options, then choose Capture screenshot for the visible viewport or Capture a full size screenshot for the entire page, including content below the fold.

Use an operating-system shortcut when you need the browser frame, another window, or a selected area. Use DevTools when you need the webpage itself.

Choose the right Chrome screenshot method

What you need	Best method	Includes browser chrome?	Can include below the fold?
What is visible in the tab	DevTools > Capture screenshot	No	No
The complete webpage	DevTools > Capture a full size screenshot	No	Yes
A rectangle or part of the display	ChromeOS selected-region shortcut or an OS capture tool	Usually yes	Only if the region is visible
The whole display	ChromeOS full-display shortcut or an OS capture tool	Yes	No

How to capture the visible Chrome tab with DevTools

Open the page you want to capture in Chrome.
Open DevTools with Ctrl+Shift+I or F12 on Windows/Linux. On macOS, press Command+Option+I. See Chrome’s DevTools keyboard shortcuts.
Open the device toolbar by clicking the phone-and-tablet icon, or press Ctrl+Shift+M (Windows/Linux) or Command+Shift+M (macOS).
In the device toolbar, open the More options menu.
Choose Capture screenshot. Chrome saves an image of the current viewport, which is the content currently visible in the tab.

This method captures the webpage area, without Chrome’s tabs, address bar, bookmarks, or DevTools panel.

How to capture a full-page screenshot in Chrome

Open DevTools and the device toolbar as described above.
Open More options.
Select Capture a full size screenshot.
Wait for Chrome to assemble the page and save the image.

Chrome’s documentation describes this command as capturing the whole page, including content that is not currently visible in the viewport. It is useful for long articles, landing pages, and pages that extend below the fold. See the Chrome DevTools screenshot documentation.

How to capture only part of a webpage

For a visible rectangle, use a system capture tool or ChromeOS’s selected-region shortcut. DevTools is page-oriented, while an operating-system capture is display-oriented. A system capture can include browser chrome and other visible windows.

If you need one element rather than a rectangle, inspect the element in DevTools and use an automated browser or screenshot API that supports element selection. A manual OS selection cannot reliably follow an element as the page changes.

ChromeOS screenshot shortcuts

Full display: press Ctrl + Show windows.
Selected region: press Ctrl + Shift + Show windows, then drag over the area.

These shortcuts capture the display or a selected region. For a clean webpage image that continues below the fold, use DevTools’ full-size command instead. ChromeOS shortcut behavior is documented in Google’s Chromebook screenshot help.

Preparing a page before capture

Scroll to the relevant state if you are capturing only the viewport.
Close menus, autocomplete lists, and DevTools overlays that should not appear.
Wait for fonts, images, and client-rendered content to finish loading.
Check responsive behavior in the device toolbar if the screenshot is for a mobile layout.
Remember that a full-size capture may include content that is lazy-loaded only after scrolling; if content is missing, scroll through the page first and retry.

Common problems and fixes

The screenshot commands are missing

Open the device toolbar first. The capture commands are in its More options menu, not the main DevTools menu. If DevTools is docked in a narrow panel, widen it or undock it so the toolbar controls are visible.

Only the visible area was saved

Use Capture a full size screenshot instead of Capture screenshot. The first captures the viewport; the second captures the complete page.

The page looks different in the screenshot

Check the device preset, viewport width, device pixel ratio, zoom level, and page state. Responsive CSS can select a different layout when the device toolbar is enabled.

Images or sections are blank

Wait for loading to finish, scroll through the page to trigger lazy images, and capture again. Network failures, blocked resources, and content that appears only after interaction can also leave gaps.

The screenshot includes browser controls

Use DevTools capture for a webpage-only image. OS shortcuts intentionally capture the display and may include the address bar, tabs, or other windows.

The full-page image is unexpectedly long

Sticky headers, repeated background elements, and expanded accordions can appear in every stitched segment. Close expanded controls and check the page at its normal scroll position before capturing.

Automation: capture a Chrome tab with code

For repeated captures, scheduled jobs, CI pipelines, or many URLs, automate the browser or use a screenshot API. A browser script gives you control over interactions; an API avoids maintaining a browser runtime.

Minimal Playwright example (Node.js)

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'tab.png', fullPage: false });
await browser.close();

Set fullPage: true for the complete document. For an element, locate it and call locator.screenshot(). In production, add explicit timeouts, retries, and checks that the expected selector exists.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. Read the full option list in the ScreenshotNeo documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Before the capture, ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. You can also use full-page capture, CSS element capture, dark mode, device presets, custom viewport and retina scale, custom CSS and JavaScript, waits, blocking rules, headers, cookies, user agents, authorization, timezone, geolocation, resizing, caching, signed links, asynchronous jobs, webhooks, bulk capture, usage data, and PDF output. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.

The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan. Create a free ScreenshotNeo account.

Performance, reliability, and cost notes

Manual captures: are fastest for one-off work and require no setup, but they are difficult to reproduce exactly.
Browser automation: is flexible for logins, clicks, and custom page state, but your runtime must manage browser versions, memory, timeouts, and retries.
API capture: is easier to run from a server or CI job. Use caching when a URL can tolerate a chosen TTL, and use asynchronous jobs or bulk capture for large batches.
Long pages: require more rendering and image memory. Keep viewport and output dimensions intentional, and avoid capturing unnecessary pages at high retina scales.
Billing: ScreenshotNeo bills only clean shots; failed loads, bot checks, blank pages, timeouts, and cache hits cost nothing.

FAQ

Can I screenshot a Chrome tab without installing an extension?

Yes. Chrome DevTools provides viewport and full-size webpage capture, and ChromeOS provides display and region shortcuts.

What is the difference between a tab screenshot and a full-page screenshot?

A tab or viewport screenshot captures what is currently visible. A full-page screenshot includes content below the fold.

How do I include the address bar?

Use an operating-system display or region capture. DevTools webpage screenshots exclude browser chrome.

Can Chrome capture a single HTML element?

DevTools is best for viewport and full-page capture. For repeatable element capture, use browser automation or an API with CSS selector support.

Which method should I use in a CI pipeline?

Use Playwright or a screenshot API. An API such as ScreenshotNeo avoids packaging and maintaining a browser process and supports bulk and asynchronous capture.