How to Save a Website as a PDF with Chrome DevTools
Use Chrome DevTools to preview print styles, then save a website as a PDF or automate export with Chrome Headless.
Chrome DevTools helps you preview how a website will look when printed; it does not itself save the page as a PDF. To create the PDF, use Chrome’s print dialog and choose a PDF destination, or automate the export with Chrome Headless and --print-to-pdf.
Choose the right Chrome workflow
| Goal | Use |
|---|---|
| Inspect or debug print styling | DevTools Rendering panel with print media emulation |
| Save one page interactively | Chrome’s print dialog and its PDF destination |
| Generate PDFs in a script or CI job | Chrome Headless with --print-to-pdf |
Print emulation changes the media type used to render the page so print CSS takes effect. It is a preview and debugging tool; a separate print/export action produces the PDF. See the [Chrome DevTools guide](https://developer.chrome.com/docs/devtools/rendering/) and [Chrome Headless CLI reference](https://developer.chrome.com/docs/chromium/headless/).
Preview print styles in Chrome DevTools
- Open the website in Chrome.
- Open DevTools: use F12 or Ctrl+Shift+I on Windows/Linux/ChromeOS, or Command+Option+I on macOS.
- Open the Command Menu with Ctrl+Shift+P on Windows/Linux/ChromeOS or Command+Shift+P on macOS.
- Type Show Rendering and select the command to open the Rendering panel.
- In the Rendering panel, find Emulate CSS media type and select print.
- Inspect the page. Print-specific CSS should now apply. If you own the site, adjust its print rules and inspect again.
To return to normal rendering, change the emulated media type back to screen or disable the emulation. The exact panel layout can change between Chrome versions; search the Command Menu for “Show Rendering” if the panel is not visible.
Save the page as a PDF interactively
- With the page in its desired state, open Chrome’s print dialog with Ctrl+P on Windows/Linux/ChromeOS or Command+P on macOS. You can also use Chrome’s menu and choose Print.
- In the print dialog, choose the PDF option as the destination, such as Save to PDF.
- Review the preview and available layout, paper size, pages, margins, scale, and header/footer settings.
- Select Save and choose a destination on your computer.
Chrome’s print dialog labels and available destinations may vary by operating system. DevTools print emulation is useful before opening the dialog, but the dialog is where you export the file. If the preview is wrong, check whether the site defines print CSS and whether the content has finished loading.
Generate a PDF with Chrome Headless
Chrome’s documented Headless command writes a PDF to the current working directory:
chrome --headless --print-to-pdf https://developer.chrome.com/The output filename is output.pdf. On systems where the executable has a different name or is not on PATH, use the path to the installed Chrome executable. Run the command from the directory where you want the PDF.
Useful Headless PDF flags
| Flag | Purpose | When to use it |
|---|---|---|
--print-to-pdf |
Print the page to a PDF file. | Basic URL-to-PDF export. |
--no-pdf-header-footer |
Omit Chrome’s generated print header and footer. | Use when the date, URL, or page number should not appear. |
--timeout=MS |
Cap the time Chrome waits before capture. | Set a bound for pages that load slowly or keep activity open. |
--virtual-time-budget=MS |
Advance page timers before capture. | Use when page content depends on JavaScript timers. |
The no-header/footer flag was previously named --print-to-pdf-no-header; an older Chrome version may require that name. Consult the [Headless CLI documentation](https://developer.chrome.com/docs/chromium/headless/) for version-sensitive flag details.
Wait for slow or time-dependent pages
For example, to allow up to 10 seconds before printing and advance virtual time by 5 seconds:
chrome --headless --timeout=10000 --virtual-time-budget=5000 --print-to-pdf https://example.com/These flags address different needs: the timeout caps the wait, while the virtual-time budget lets timers advance. They do not guarantee that every site’s remote data, animations, or client-side rendering has completed. Check the resulting PDF, and increase or adjust the wait for the page you are capturing.
Print CSS, page size, and headers
Web pages can define print-specific styles with @media print. The @page rule can specify page size and margins. From Chrome 131, CSS can also generate content in page margin boxes, such as page counters. Browser-generated headers and footers may appear when there is room; the Chrome print dialog can disable them. See [Chrome’s article on page-margin boxes](https://developer.chrome.com/blog/print-margins/).
@media print {
nav, .screen-only { display: none; }
body { color: #111; background: #fff; }
}
@page {
size: A4;
margin: 18mm;
}Put print rules in the site’s stylesheet if you control the site. For a one-off export, inspect the print preview and adjust the print dialog’s settings. DevTools’ emulation helps reveal what the site’s print stylesheet does, but it does not create or modify a saved PDF by itself.
Troubleshooting
| Symptom | Likely cause | What to try |
|---|---|---|
| “Show Rendering” does not appear | The Command Menu query or Chrome interface differs. | Open DevTools first, open its Command Menu, and search for Show Rendering. Check the Rendering panel in DevTools. |
| Page still looks like the screen version | Print media emulation is not enabled, or the page has no print-specific styles. | Set Emulate CSS media type to print; inspect the print dialog preview too. |
| DevTools did not produce a PDF | Media emulation is only a rendering preview. | Use the print dialog’s PDF destination or Headless --print-to-pdf. |
| Headless command says Chrome is not found | The executable name or location differs. | Run the installed Chrome binary by its full path, or make it available on PATH. |
| PDF includes date, URL, or page number | Browser-generated headers and footers are enabled. | Use --no-pdf-header-footer (or the older flag name where required), or disable headers and footers in the print dialog. |
| PDF is blank or missing content | The page may not have loaded or rendered before printing. | Confirm the URL loads in Chrome, allow more time, and try --timeout or --virtual-time-budget as appropriate. |
| Layout breaks across pages | Print CSS, page dimensions, or margins do not suit the content. | Preview print media, adjust @page and print rules if you control the site, or change paper size, scale, and margins in the print dialog. |
Reliability, performance, and cost
Interactive printing is convenient for a one-off page and lets you review the output before saving. Headless export is scriptable, but each run depends on Chrome being available and the target page loading in the capture environment. For repeatable output, use a stable Chrome version, set a sensible wait bound, and inspect PDFs when pages change or include dynamic content.
The browser workflow has no ScreenshotNeo API charge; automation still uses your own machine or CI resources. Longer waits can make a capture job slower, while waits that are too short can omit late-rendered content. There is no universal timeout that fits every site.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. For a PDF, request PDF output from its API; the one-call example below returns a screenshot image, so use the documented PDF options when you need a document. See the [ScreenshotNeo API documentation](https://screenshotneo.com/docs/).
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-d format=pdf \
-o page.pdfimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com", "format": "pdf"},
timeout=90,
)
r.raise_for_status()
open("page.pdf", "wb").write(r.content)const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com',
format: 'pdf'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`ScreenshotNeo returned ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('page.pdf', Buffer.from(await res.arrayBuffer())));ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report 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 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, no card required.
FAQ
Does print emulation save a PDF automatically?
No. It previews the page using print media. Use Chrome’s print/export flow or Headless PDF printing to create a file.
Can I remove Chrome’s URL and date from the PDF?
Yes. Disable browser-generated headers and footers in the print dialog, or use the supported Headless no-header-footer flag for your Chrome version.
Can a website control its printed page layout?
Yes. A site can provide print CSS and page settings, which you can inspect with print media emulation.
