How to Capture a Web Page Screenshot in Chrome without Browser Toolbars
Capture a clean Chrome screenshot of the visible page, a full page, a selected area, or one element using DevTools—without tabs or the address bar.
To capture webpage content without Chrome’s tabs or address bar, use Chrome DevTools rather than an operating-system screenshot of the whole browser window. In DevTools, turn on the Device toolbar, open More options, and choose Capture screenshot for the visible viewport or Capture a full size screenshot for the entire page.
For a custom rectangle, use the Command Menu’s Capture area screenshot. For one page element, select it in the Elements panel and run Capture node screenshot. Chrome DevTools is built into Chrome, so these workflows require no screenshot extension or separate capture application. Chrome DevTools overview.
Choose the right capture
| What you need | DevTools method | What it captures |
|---|---|---|
| Visible page content | Device toolbar → More options → Capture screenshot | The current viewport, without browser tabs or address bar. |
| Whole long page | Device toolbar → More options → Capture a full size screenshot | The full page, including content below the fold. |
| A rectangle | Command Menu → Capture area screenshot | The region you drag across; DevTools must be docked. |
| One component or element | Elements panel → select node → Command Menu → Capture node screenshot | The selected HTML node, including a node that extends beyond the screen. |
| Mobile-shaped page | Device Mode → choose a mobile viewport → capture | A page rendered at an emulated viewport; emulation is not identical to actual mobile hardware. |
Capture a visible viewport or full page
- Open the page in Chrome.
- Open DevTools. Use Ctrl+Shift+I on Windows or Linux, or Command+Option+I on macOS. You can also open it from Chrome’s menu under More tools.
- Click Toggle device toolbar in DevTools, or press Ctrl+Shift+M on Windows/Linux or Command+Shift+M on macOS.
- In Device Mode, open the More options menu.
- Choose Capture screenshot for the visible viewport, or Capture a full size screenshot to include the page below the fold.
Chrome saves the resulting image as a download. Check the saved file, especially for very long pages, sticky elements, animations, or content loaded only after scrolling. The capture action targets the webpage rather than the complete Chrome window; that is why browser controls are absent. Chrome Device Mode documentation.
Capture a custom area
- Keep DevTools docked to the browser window. Area capture does not work when DevTools is undocked.
- Open the Command Menu with Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS.
- Type screenshot and choose Capture area screenshot.
- Drag over the rectangle you want to capture and release. Inspect the downloaded image to confirm the crop.
If the area command is missing or cannot start, dock DevTools and search for “screenshot” again. The available commands and labels may vary with Chrome versions and localization. Chrome Command Menu documentation.
Capture one element
- Open DevTools and go to the Elements panel.
- Use the element picker or inspect the page to select the card, image, diagram, or other node you want.
- Open the Command Menu using Ctrl+Shift+P (Windows/Linux) or Command+Shift+P (macOS).
- Search for Capture node screenshot and run it.
- Open the saved image and verify the element’s edges and any content that extends beyond the viewport.
Node capture is useful when the desired output is one component rather than a viewport or whole page. A node’s appearance can depend on surrounding page styles, fonts, images, and application state, so check the result for the specific page. Chrome DevTools screenshot tips.
Capture a mobile viewport
In Device Mode, choose a device preset or set the viewport dimensions, then capture the page using the viewport or full-size screenshot action. Device Mode can simulate aspects of mobile use, but Chrome cannot reproduce every behavior of a physical device. Use a real phone when actual hardware behavior matters.
A device frame is optional when the goal is a mobile-shaped page image. Leave the frame off if you want only the webpage content without device chrome. See the Device Mode documentation for the available controls.
Prepare the page for a reliable capture
- Wait for the page to settle. A screenshot taken while the page is loading can show placeholders, incomplete images, or a loading indicator.
- Set the desired viewport first. Responsive layouts may change substantially with viewport width and height.
- Check below the fold. Full-page capture includes off-screen content, but pages that load content only after scrolling may need to be scrolled first so that content is present.
- Consider sticky elements and animation. A sticky header or animated section may appear in an unexpected position or frame; inspect the output and retry after the page settles.
- Confirm the saved file. Open the download to check that the right scope, crop, and scale were captured.
Troubleshooting
| Problem | Likely cause | What to do |
|---|---|---|
| The screenshot includes tabs or the address bar. | You captured the whole operating-system window instead of the page through DevTools. | Use Device Mode’s screenshot command to capture the webpage. |
| The image stops at the visible viewport. | You chose Capture screenshot. | Choose Capture a full size screenshot for the complete page. |
| Capture area is unavailable or fails. | DevTools is undocked. | Dock DevTools, reopen the Command Menu, and search for “screenshot.” |
| Screenshot command labels differ. | Chrome’s DevTools interface can change or be localized. | Search “screenshot” in the Command Menu, or use Device Mode’s More options menu. |
| The full-page image is missing content that appears after scrolling. | The site may load content lazily or only after an interaction or scroll. | Scroll through the page to trigger loading, wait for it to finish, then capture again. |
| A mobile capture does not match a real phone. | Device Mode simulates a viewport and some device behavior, not every aspect of physical hardware. | Use a physical device when the exact on-device result is important. |
| The selected node image looks different from the page. | Styles, fonts, assets, or application state may affect rendering. | Check that the page is fully loaded and the intended node is selected, then capture again. |
Or skip the browser setup
For repeatable captures in scripts, services, or an AI workflow, ScreenshotNeo returns a page image from one API request. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);Replace YOUR_API_KEY with your key. The examples capture the target page and save the returned image. ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card required.
Performance, reliability, and cost
For an occasional capture on your own machine, DevTools avoids setting up a separate capture service. Full-page captures can take longer and produce larger files than viewport captures, particularly for very long pages or pages with many images. Allow the page to finish loading and verify the download before relying on it.
For repeated or automated captures, an API can remove browser setup from your own workflow. ScreenshotNeo charges only for clean shots; bot checks and failed or blank results are not billed, and cache hits cost nothing. The free tier is 1,000 shots per month; paid tiers are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free. Every feature is on every plan. Choose based on your expected capture volume and use the response billing headers to distinguish billed captures from other outcomes.
FAQ
Does a DevTools screenshot include Chrome’s address bar?
No. The DevTools page capture actions capture webpage content, not the entire browser window.
Can I capture a page without installing an extension?
Yes. Chrome DevTools is built into Chrome and provides viewport, full-page, area, and node capture workflows.
Which option should I use for a single card or chart?
Select its HTML node in Elements and run Capture node screenshot.
Can Device Mode guarantee a screenshot identical to a real phone?
No. It simulates aspects of a mobile device, but actual hardware can behave differently.
