How to Save a Webpage as PDF with Browser Developer Tools
Save a webpage as a PDF from your browser, inspect print styles in DevTools, and automate repeat captures with Chrome Headless or the DevTools Protocol.
For a one-off PDF, open your browser’s Print dialog, review the preview, and choose its PDF destination. Developer Tools help when you need to inspect or adjust the page’s print-specific styling; opening DevTools alone does not save a PDF. For repeatable automated capture in Chrome, use Chrome Headless’s --print-to-pdf option or the DevTools Protocol method Page.printToPDF.
1. Save a webpage from the browser’s Print dialog
- Open the webpage you want to save.
- Open Print from the browser menu or use the browser’s print shortcut. Edge documents Ctrl+P on Windows and Command+P on Mac; shortcuts can vary by browser and platform.
- Review the preview. Choose a PDF destination (Firefox labels this Save to PDF) rather than a physical printer.
- Adjust paper size, orientation, scale, margins, page range, backgrounds, and header or footer options as needed. The available controls vary by browser and platform.
- Review the updated preview, then save the PDF.
A printer and paper are not required. The browser renders the page for print and writes that output to a PDF file.
2. Use Developer Tools to inspect print styling
Websites can use CSS rules that apply only when printing. As a result, print output can differ from the screen: navigation may disappear, columns may change, or content may reflow across pages. Inspect the print rendering before you save when layout matters.
- In Microsoft Edge, right-click the page and select Inspect to open DevTools.
- If the DevTools Quick View is open, reveal the full tools. Choose More tools, then Rendering.
- In the Rendering tool, find Emulate CSS media type and select
print. - Use the Elements panel to inspect the page structure and print styles. You can edit styles in DevTools to see their effect on the preview.
- When finished, set the media type back to No emulation to return to the screen rendering.
- Open the browser’s Print dialog to create the PDF. DevTools previews and helps debug the print rendering; the browser’s print feature saves it.
Edge documents this print-media workflow. Other browsers may expose different tools or labels; use their current print preview to inspect the result.
3. Tune page layout and choose what to include
| Setting | When to adjust it |
|---|---|
| Paper size | Choose the size expected by the reader or printer. A different paper width can change line wrapping and pagination. |
| Orientation | Try landscape for wide tables or diagrams; use portrait for typical articles. |
| Scale | Reduce scale if content is clipped or a wide layout spills off the page. Check that text remains readable. |
| Margins | Increase them to create more whitespace or reduce them to fit more content, subject to the browser’s available controls. |
| Page range | Save only the pages you need when the dialog offers page selection. |
| Background graphics | Enable this option when colored backgrounds or background images are part of the information you need to preserve. It may use more ink if printed physically. |
| Headers and footers | Choose whether to include browser-added details such as the URL, date, or page number where the browser provides that control. |
Make one change at a time and inspect the preview again. For cluttered pages, Edge’s Immersive Reader or Firefox’s Simplified format may offer a cleaner print view when available for that page. Edge also supports printing a selected text or image region: select it, right-click, and choose Print. Firefox documents the optional Print Edit WE extension for editing print content; the ordinary save workflow does not require an extension.
4. Automate PDF capture with Chrome Headless
For a repeatable command-line capture, Chrome Headless can print a URL to a PDF in the current working directory:
chrome --headless --print-to-pdf https://example.com/The default output filename is output.pdf. To omit Chrome’s PDF headers and footers, including date/time and URL/page-number material, add --no-pdf-header-footer:
chrome --headless --print-to-pdf --no-pdf-header-footer https://example.com/For pages that need time to load, set a maximum wait in milliseconds with --timeout:
chrome --headless --timeout=5000 --print-to-pdf https://example.com/Chrome also documents --virtual-time-budget for pages with time-dependent code. A fixed timeout or virtual-time budget does not guarantee that every site has finished rendering. Delayed, personalized, or interaction-dependent content may need site-specific handling.
5. Automate through the Chrome DevTools Protocol
If your application already controls Chrome through the DevTools Protocol, call Page.printToPDF. It accepts print settings such as paper dimensions, scale, margins, landscape orientation, page ranges, background printing, and header/footer display and templates. The following is the method’s parameter shape; invoke it through an active DevTools Protocol session to the target page:
{
"id": 1,
"method": "Page.printToPDF",
"params": {
"landscape": false,
"displayHeaderFooter": false,
"printBackground": true,
"scale": 1,
"paperWidth": 8.27,
"paperHeight": 11.7,
"marginTop": 0.4,
"marginBottom": 0.4,
"marginLeft": 0.4,
"marginRight": 0.4,
"pageRanges": "1-3"
}
}The protocol method returns PDF data to the caller, which must decode and write it to a file. Use the protocol documentation for the complete parameter definitions and the connection flow for your browser client.
6. Troubleshoot common PDF problems
| Problem | Likely cause | What to try |
|---|---|---|
| The PDF layout differs from the screen | The page uses print-specific CSS. | Emulate print in Edge’s Rendering tool, inspect the print styles in Elements, then review the browser’s print preview. |
| Text, tables, or images are clipped | The content is wider than the selected paper size or the scale and margins leave too little room. | Try landscape, a larger paper size, smaller scale, or narrower margins; check the preview after each change. |
| Colored areas or background images are missing | Background graphics are disabled in the print settings. | Enable Background graphics where available and inspect the preview again. |
| The PDF contains navigation or ads | The page’s print styles retain those elements, or the site offers a simplified reading view. | Try Immersive Reader in Edge or Simplified format in Firefox where available. Firefox’s optional Print Edit WE extension can be used when you need to edit print content. |
| The PDF is missing content on a page that loads slowly | Automated capture began before delayed content was ready. | Increase Chrome Headless’s --timeout or use --virtual-time-budget for time-dependent page code. Add site-specific handling for content that requires scrolling, personalization, or interaction. |
| Chrome Headless cannot find the output file | output.pdf is written to the command’s current working directory. |
Check that directory after the command completes, or run the command from the directory where you want the file. |
| A selected-region print option is unavailable | The browser or page may not support the documented selection workflow in that context. | Use the ordinary print dialog and its page-range controls, or try the browser’s current print preview. |
7. Consider performance, reliability, and cost
For a single page, the browser dialog is usually the shortest path. Headless Chrome and the DevTools Protocol make captures repeatable, but automated output still depends on page load timing, print CSS, and site behavior. A timeout is a ceiling on the wait, not proof that all scripts, images, or personalized content are ready. For important documents, inspect the PDF after generation and rerun with adjusted settings if it is incomplete.
The workflows above use browser features and Chrome; the cited documentation does not establish a universal capture-time benchmark or a per-capture service cost. If you need to capture pages through an API instead of maintaining browser automation, ScreenshotNeo offers an API and MCP server. Its plans include 1,000 free shots per month and paid plans from $5 for 3,000 shots.
Or skip the browser setup
ScreenshotNeo can return a PDF from one GET request. See the ScreenshotNeo API documentation for the request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -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}`);
const fs = await import('node:fs/promises');
await fs.writeFile('page.pdf', Buffer.from(await res.arrayBuffer()));ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. 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. Sign up for 1,000 free screenshots a month, with no card required.
8. FAQ
Do I need Developer Tools to save a webpage as a PDF?
No. Use the browser’s Print dialog and select its PDF destination. DevTools is useful when you need to inspect or debug print styles.
Does changing CSS in DevTools change the website?
DevTools style edits are for inspecting the rendering in the open browser session. To create the file, use the browser’s print feature after reviewing the result.
Can I save only one part of a webpage?
Edge documents printing a selected text or image region. Alternatively, select a page range in the print dialog when that control is available.
Why does a browser PDF include a URL or date?
Some print interfaces or automated defaults add headers and footers. Check the dialog’s header/footer setting; for Chrome Headless, use --no-pdf-header-footer.
