Use Chrome DevTools for a quick, manual screenshot while inspecting a page; use Puppeteer when screenshots need to be scripted, repeated, or included in browser workflows such as UI tests and CI. They are not equivalent tools: DevTools is an interactive browser interface, while Puppeteer is a JavaScript automation library.
How the workflows differ
Chrome DevTools Device Mode lets you adjust a responsive viewport interactively, using device presets or entered dimensions, and capture what you are inspecting. Puppeteer controls a browser from code, so a screenshot can follow navigation or other browser actions and run again as part of a script or test.
As an Amazon Associate I earn from qualifying purchases.
Both can capture a visible page, but their roles differ: DevTools is designed for hands-on inspection; Puppeteer is part of an automatable browser workflow. Puppeteer also supports browser interaction, UI testing, PDF generation, and other tasks beyond screenshots.
Free tools Windows power users keep installed
One-click scans. No signup required.
When to use Chrome DevTools
Choose DevTools when you are already looking at a page and want an individual capture, particularly while checking responsive layouts or adjusting the viewport. Device Mode offers controls for viewport width and height, device presets, and simulation settings.
#1 Best Overall
- Open the page in Chrome and open DevTools.
- Turn on Device Mode and select a preset or set the viewport width and height you want to inspect.
- Open the DevTools More options menu.
- Choose Capture screenshot for the currently visible viewport, or Capture a full size screenshot to capture the full page, including content beyond the viewport.
This is a manual workflow: it is convenient for a one-off inspection, but the documented capture actions are menu operations rather than a script to run repeatedly.
When to use Puppeteer
Choose Puppeteer if a screenshot must be produced by code, taken after navigation or interaction, aimed at a particular element, or repeated in tests or CI. Its screenshot API supports whole-page capture, and its element screenshot API captures a specific element. By default, Puppeteer runs headless; it can also be configured to use a visible browser.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Install Puppeteer
In a new Node.js project, install the package:
npm install puppeteerPuppeteer downloads a compatible Chrome for Testing binary by default. Its default launch mode is headless.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteCapture a page
Save this as screenshot.js. It opens a page, waits for navigation to finish, writes a full-page PNG, and closes the browser even if capture fails.
Rank #3
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900 });
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}
})();Run it with node screenshot.js. Change the URL and viewport to fit your case. The fullPage option includes content beyond the current viewport; omit it for a viewport capture.
Capture one element
After navigating, select the element and call its screenshot method:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
const element = await page.$('.product-card');
if (!element) throw new Error('Could not find .product-card');
await element.screenshot({ path: 'product-card.png' });Replace .product-card with a selector from the page. Puppeteer’s element screenshot behavior scrolls the target into view by default if it is hidden.
Use a visible browser when needed
For interactive debugging, launch with headless: false:
const browser = await puppeteer.launch({ headless: false });For unattended work, Chrome’s automation guidance describes a version-pinned Chrome for Testing binary, Headless mode, and an automation driver such as Puppeteer as a typical CI setup. Pinning the browser version makes the browser environment explicit; do not assume an arbitrary locally installed Chrome is the same environment as the one used in CI.
Choose by the work you need done
| Need | Better fit | Why |
|---|---|---|
| One screenshot while visually inspecting a page | Chrome DevTools | Capture is available directly from the DevTools menu. |
| Adjust a responsive viewport interactively | Chrome DevTools | Device Mode provides viewport controls and device presets. |
| Capture after navigation or browser interaction | Puppeteer | A script can control the browser workflow before taking the screenshot. |
| Capture a specific element | Puppeteer | ElementHandle.screenshot() targets an element. |
| Repeat captures in a test or unattended CI job | Puppeteer | It is an automation library that can run in a scripted, headless workflow. |
This is a workflow comparison, not a speed or image-quality ranking: the documented capabilities do not establish that one produces faster or better-looking images in general.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot endpoint rather than a browser you manage, ScreenshotNeo is the alternative to try first: it removes cookie banners, popups, and chat widgets before capture, and bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
One GET request returns an image or PDF. For example, this cURL request saves a WebP screenshot; replace the URL with the page you want to capture. 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://example.com -o shot.webpUse the equivalent Python request if that fits your application:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)Or make the request from Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await require('node:fs/promises').writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));Sign up free for 1,000 screenshots a month, with no card required.
Quick Recap
Troubleshooting Puppeteer captures
- The script cannot find the browser binary: Puppeteer normally downloads a compatible Chrome for Testing binary during installation. Check that dependency installation completed in the environment where the script runs.
- The screenshot is blank or missing page content: Confirm the navigation completed and choose a wait condition appropriate for the page. The example waits for network idle; pages with ongoing requests may not reach that condition, so use a more suitable navigation wait and, when necessary, explicitly wait for the content you need.
- An element screenshot fails: Check that the selector matches an element after navigation. The example checks for a missing element and throws a clear error; for content rendered later, wait for the selector before capturing.
- CI behaves differently from a local run: Make the Chrome for Testing version and headless configuration explicit and consistent with the CI environment. Avoid relying on a developer machine’s browser state or version.
- The browser stays open after an error: Put
browser.close()in afinallyblock, as in the page example, so errors during navigation or capture do not skip cleanup.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
