How to capture a full webpage with Firefox Developer Tools
Capture a full-page screenshot in Firefox with the Developer Tools button or Web Console, and learn how to save an element or use an API.
Firefox Developer Tools can capture the entire rendered page, including portions beyond the current window. For the toolbar workflow, enable Take a screenshot of the entire page in Developer Tools Settings, then click the screenshot icon. For a command workflow, open the Web Console and run :screenshot --fullpage. The command also supports a filename, delay, device pixel ratio, clipboard output, and element selector.
1. Capture the whole page with the Developer Tools button
- Open the page you want to capture and wait for the content you need to appear.
- Open Developer Tools. Mozilla documents Ctrl+Shift+I or F12 on Windows and Linux, and Cmd+Option+I on macOS. Shortcuts may vary with browser version or customization.
- Open the Developer Tools settings and find Available Toolbox Buttons.
- Check Take a screenshot of the entire page. The screenshot icon should now appear in the toolbox toolbar. It is not enabled by default in the documented workflow.
- Click the screenshot icon. Firefox saves the image to the browser’s Downloads directory.
Use this method when you want a direct, repeatable toolbar action. It captures the page currently open in Firefox; it does not turn content hidden behind an interaction into visible content.
Mozilla documents the [Developer Tools screenshot control](https://firefox-source-docs.mozilla.org/devtools-user/taking_screenshots/index.html) and its [Developer Tools overview](https://firefox-source-docs.mozilla.org/devtools-user/index.html).
2. Capture with the Web Console
Open the Web Console from Developer Tools, enter a screenshot command, and press Enter:
:screenshot --fullpageTo choose a PNG filename explicitly:
:screenshot --fullpage --filename full-page.pngThe --fullpage option includes webpage portions outside the current window bounds. When saving repeatedly, use a new filename: capturing again to the same filename overwrites the previous file.
Useful command options
| Option | What it does | When to use it |
|---|---|---|
--fullpage |
Captures the full webpage rather than only the window area. | Use for a tall page. |
--filename name.png |
Sets the PNG filename. | Use descriptive names or avoid overwriting an earlier capture. |
--delay seconds |
Waits the specified number of seconds before capture; integer and floating-point delays are supported. | Allow a menu, hover state, or late-rendering content time to appear. |
--dpr value |
Sets the device pixel ratio. Values above 1 produce more pixels; values below 1 produce fewer. | Adjust output pixel dimensions where supported by the page and browser. |
--clipboard |
Copies the capture to the clipboard. | Paste it into another application instead of saving a file. |
--selector CSS |
Captures one selected element and its descendants. | Use a CSS selector for a component rather than the whole document. |
For example, wait briefly and capture the full page to a named file:
:screenshot --fullpage --delay 1.5 --filename checkout-page.pngTo capture one element instead, omit --fullpage and provide a selector:
:screenshot --selector "main article" --filename article.pngFirefox’s documented option set includes filename, delay, DPR, clipboard, full-page, and selector controls. See Mozilla’s [screenshot command reference](https://firefox-source-docs.mozilla.org/devtools-user/taking_screenshots/index.html).
3. Choose the right capture mode
| Need | Firefox method |
|---|---|
| Full page through Developer Tools | Enable the screenshot toolbox button, then click it. |
| Full page with delay or a CSS selector | Use :screenshot in the Web Console. |
| One element and its descendants from the Inspector | Right-click the element in the Inspector’s HTML pane and select Screenshot Node. |
| One-off capture without opening Developer Tools | Right-click an empty area of the page, select Take Screenshot, then choose Save full page. |
| Visible viewport only | Use Save visible in Firefox Screenshots. |
Firefox Screenshots also supports a selected region and automatically highlighted page parts. Its shortcut is Ctrl+Shift+S on Windows and Linux, or Command+Shift+S on macOS. Choose Download to save to Firefox’s configured download folder or Copy to put the image on the clipboard. This is a separate interface from the Developer Tools button. Details are in Mozilla’s [Firefox Screenshots guide](https://support.mozilla.org/en-US/kb/take-screenshots-firefox).
4. Work with dynamic and lazy content
A full-page capture includes the rendered page beyond the viewport, but it does not guarantee that every off-screen image or dynamically loaded section has appeared. A page may load content only after scrolling, waiting, clicking, or satisfying an application-specific condition.
- Wait until the page’s initial load and visible content are stable.
- If a menu or hover state is needed, put the pointer in the intended state and use
--delaybefore capturing. - If content appears only after scrolling, scroll through the page first and confirm the content has loaded, then take the screenshot.
- If only one component is needed, use
--selectoror Inspector’s Screenshot Node. - Check sticky headers, animations, carousels, and overlays in the result; the screenshot records the page state at capture time.
Do not assume the screenshot can reveal content that the page has not rendered or that requires a user action. The documented full-page behavior concerns content outside the window bounds.
5. Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| No screenshot icon in the toolbox | The button is disabled by default. | In Developer Tools Settings, enable Take a screenshot of the entire page under Available Toolbox Buttons. |
| Only the visible area was captured | The regular Screenshots UI’s visible mode was chosen, or the Console command omitted its full-page option. | Choose Save full page, click the enabled full-page Developer Tools icon, or run :screenshot --fullpage. |
| The file replaced an earlier screenshot | The same filename was reused. | Specify a distinct --filename for each capture. |
| Lazy-loaded images or sections are missing | The site had not rendered or loaded them at capture time. | Scroll through the page, wait for the content, and capture again. A delay helps with time-based rendering, but cannot satisfy every site-specific trigger. |
| The selector capture is empty or wrong | The selector does not match the intended element, or matches a different part of the document. | Inspect the DOM, use a selector that identifies the intended element, and retry. Use Inspector’s Screenshot Node when selecting it visually is easier. |
| Capture takes a long time or output is unwieldy | A very tall page or high DPR creates a large image. | Capture only the needed element, lower the DPR, or use a viewport capture when full-page coverage is unnecessary. |
6. Performance, reliability, and output size
Capture time and output size depend on page length, rendered content, and device pixel ratio. A full-page image can be much larger than a viewport image; a higher DPR increases pixel dimensions. If file size or handling time matters, lower DPR or capture a smaller element. Firefox’s cited documentation does not publish a capture-time benchmark or guarantee that all site-specific dynamic content will load automatically.
For repeat captures, use clear filenames and check the saved image before relying on it. A browser screenshot is a record of the current rendered state, so repeat the capture if fonts, images, animations, or asynchronous content were still changing.
7. Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Send one GET request with the page URL to receive a PNG, JPEG, WebP, or PDF. The [API documentation](https://screenshotneo.com/docs/) includes the 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}`);ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. 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 screenshots.
Sign up for 1,000 free screenshots a month, with no card required.
FAQ
Does the Developer Tools button save a PNG?
Mozilla documents PNG output for the screenshot command and the Developer Tools capture workflow. The toolbar button saves the image to Downloads.
Can I capture only a particular DOM element?
Yes. Use --selector in the Web Console or right-click the element in the Inspector and choose Screenshot Node.
Does a full-page screenshot include content behind a closed accordion?
Not necessarily. Full-page capture includes rendered content outside the window bounds; it does not imply that collapsed or otherwise unrendered content is opened.
Where does Firefox save the image?
The Developer Tools capture is saved in the browser’s Downloads directory. Firefox Screenshots’ Download action uses Firefox’s configured download folder.
