How to screenshot a webpage with browser developer tools in Firefox

Firefox can capture a full webpage, a single page element, or the visible viewport using built-in developer tools. For the most control, open the Web Console and use :screenshot; the Inspector and Responsive Design Mode provide convenient point-and-click alternatives.

1. Open Firefox Developer Tools

Open the tools for the active tab from Tools > Web Developer > Web Developer Tools, or use a keyboard shortcut:

Windows and Linux: Ctrl+Shift+I or F12
macOS: Cmd+Opt+I

Firefox’s screenshot commands operate on the page associated with the active tab. Check that it is the page you want before capturing.

2. Capture the full webpage with the screenshot button

The toolbar button captures the entire page, including content beyond the visible viewport. It is not enabled by default.

Open Developer Tools, then open its settings.
Under Available Toolbox Buttons, enable Take a screenshot of the entire page.
Click the screenshot button that appears in the toolbox toolbar.

Firefox saves the image to its Downloads directory. Use this route when you want a full-page image and do not need to specify a custom filename or capture options.

3. Capture a single element in the Inspector

To save one card, image, panel, or other DOM element, use Screenshot Node:

Open the Inspector in Developer Tools.
Select the target element in the HTML pane. If needed, use the element picker to select it on the page.
Right-click the node and choose Screenshot Node.

Firefox captures the selected node and saves the image to Downloads. This is useful when you want the rendered element itself rather than a crop of the screen.

4. Use the Web Console for capture options

Open the Web Console, type :screenshot, and add the options you need. For example, to save a full-page image under a chosen name:

:screenshot page.png --fullpage

The helper supports these documented options:

Option	What it does
`--fullpage`	Captures page content outside the current window bounds.
`--selector "CSS selector"`	Captures the element matched by a CSS selector.
`--filename name.png`	Sets the output filename.
`--delay seconds`	Waits before capturing, useful for a menu or hover state that needs time to appear.
`--dpr number`	Sets device-pixel ratio. Values above 1 produce a more zoomed-in image; values below 1 produce a more zoomed-out image.
`--clipboard`	Copies the screenshot to the clipboard. This prevents file saving unless `--file` is also used.
`--file`	Forces file writing when another option, such as `--clipboard`, is present.

Useful command examples

Capture a particular element by CSS selector:

:screenshot --selector "main article" --filename article.png

Wait two seconds before capturing a full page:

:screenshot page.png --fullpage --delay 2

Copy a capture to the clipboard:

:screenshot --clipboard

Copy it and also write a file:

:screenshot page.png --clipboard --file

Use a different filename for each capture. Reusing a filename overwrites the earlier image. For full-page captures, Firefox appends -fullpage to the filename.

5. Capture the visible viewport with Responsive Design Mode

For a screenshot of the current viewport, open Responsive Design Mode and click its camera button. Firefox saves the capture to the default Downloads location. If Screenshot to clipboard is enabled in Developer Tools settings, the capture is also copied to the system clipboard.

This route captures the viewport, rather than the entire document. Use the full-page toolbar button or :screenshot --fullpage when you need content below the fold.

6. Pick the route that matches the result

What you need	Firefox route
Entire webpage	Enable and click the toolbox screenshot button, or use `:screenshot page.png --fullpage`.
One DOM element	Inspector context menu > Screenshot Node, or Console `--selector`.
Visible viewport	Responsive Design Mode camera button.
Named, delayed, or clipboard capture	Web Console `:screenshot` with the relevant options.

7. Troubleshooting

The screenshot button is missing

It is disabled by default. Open Developer Tools settings and enable Take a screenshot of the entire page under Available Toolbox Buttons.

The image shows only the visible area

You likely used the viewport camera. To include content outside the window, enable the full-page toolbox button or add --fullpage to the Console command.

The wrong element was captured

For Inspector capture, verify the selected HTML node before choosing Screenshot Node. For Console capture, check that the CSS selector matches the intended element on the active page.

The file is missing or was overwritten

The toolbar and Inspector routes save to Downloads. The Console’s --clipboard option copies to the clipboard and suppresses file saving unless you also pass --file. A repeated filename overwrites the previous image; choose a new filename for each capture.

Allow the page state to appear before the capture. Use --delay with a suitable number of seconds, and make sure the state is triggered on the page before running the command.

The image is more zoomed in or out than expected

Review the --dpr value. Values above 1 zoom in; values below 1 zoom out. Omit the option when you do not need to adjust the device-pixel ratio.

8. Practical limits and reliability

Firefox’s built-in capture is a good fit for an occasional manual screenshot while inspecting a page. The documented routes save to Downloads, with clipboard and filename controls available through the Console helper. For repeatable captures, keep the command and output filenames consistent, and confirm the active tab, selected element, and page state before each capture.

Full-page captures can include content outside the viewport, while viewport captures cannot. A delay can help with transient states, but it only waits; it does not guarantee that asynchronous content has finished loading. The documented Firefox instructions do not specify a cost: these are built-in browser tools.

Or skip the browser setup

If you need repeatable captures in an app, script, or AI workflow, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. Its API documentation describes 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.webp

import 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}`);

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An 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.

FAQ

Can Firefox capture an element without taking a screenshot of the whole page?

Yes. Right-click its node in the Inspector and choose Screenshot Node, or use the Console helper with --selector.

Where does Firefox save screenshots?

The toolbar and Inspector capture routes save to Downloads. The Console helper can copy to the clipboard; use --file as well when you also want a file.

Yes. Enable it in Developer Tools settings under Available Toolbox Buttons.