How to Capture a Website Screenshot Without Browser Toolbars for a Presentation
Capture a clean webpage image in Firefox without browser controls. Choose a full page, viewport, or single element, then prepare it for presentation slides.
To capture a website screenshot without browser toolbars, use Firefox’s page screenshot feature instead of a desktop screenshot of the whole browser window. Firefox Developer Tools can capture the full page, the visible viewport, or one selected element; the saved image contains page content without browser controls. Mozilla documents these options in its Firefox screenshot guide.
Choose the right capture for your slide
| Capture | Use it when | Trade-off |
|---|---|---|
| Full page | You need to show the page’s overall structure or a long flow. | The image can be very tall, making text too small when fitted onto a slide. |
| Viewport | You want a screen-sized view at a chosen responsive width. | Content below the visible area is not included. |
| Element | The point is one chart, card, menu, or other component. | Surrounding page context is omitted. |
For a presentation, select the smallest scope that makes the point clear. A focused viewport or element is often more legible than shrinking a very tall full-page capture to fit a slide. This is layout guidance; choose based on what your audience needs to see.
Capture a full webpage in Firefox Developer Tools
- Open the page you want to capture in Firefox.
- Open Developer Tools with Ctrl+Shift+I or F12 on Windows or Linux, or Cmd+Option+I on macOS.
- In Developer Tools settings, find Available Toolbox Buttons and enable Take a screenshot of the entire page.
- Click the screenshot button in the Developer Tools toolbar. Firefox saves the screenshot to the browser’s Downloads directory.
- Open the saved image and inspect it at the size it will appear in your deck.
The screenshot button may be disabled by default. Menu labels and interface details can vary by Firefox version and platform; if you cannot find the button, use the Web Console method below. See Mozilla’s DevTools tips.
Capture a viewport or a selected element
Capture the viewport
Open Responsive Design Mode, set the viewport dimensions that suit the slide, then use the screenshot button there. Firefox’s DevTools tips list viewport capture through Responsive Design Mode. This is useful when you want to control how responsive page content is laid out in the image.
Capture one element
- Open the Inspector in Developer Tools.
- Select the target node in the HTML pane. If it is difficult to select, use the page picker and move through parent or child nodes in the Inspector.
- Open the selected node’s context menu and choose Screenshot Node.
- Find the image in Downloads and check that the element is not clipped.
Firefox captures the selected node and its descendants. This works well for a self-contained component; if the component depends on nearby labels or context, include those in the selection or capture a viewport instead.
Use the Web Console for repeatable captures
Firefox’s Web Console screenshot helper provides options for a filename, full-page capture, a CSS selector, a delay, device pixel ratio, and clipboard output. Open the Web Console for the page, then enter a command such as:
:screenshot --fullpage --filename=product-page.png
The filename should use the .png extension. Firefox saves the file in Downloads. To capture a single element by selector:
:screenshot --selector="main .pricing-card" --filename=pricing-card.png
For a hover state or menu that needs time to appear, add a delay in seconds:
:screenshot --delay=1.5 --filename=menu-open.png
To capture a different device-pixel ratio, specify --dpr. Values above 1 produce a more densely sampled, zoomed-in image; values below 1 zoom out. Preview the result because a different ratio can affect how it fits your slide:
:screenshot --dpr=2 --filename=retina.png
Available options documented by Mozilla include:
| Option | Effect |
|---|---|
--fullpage |
Captures the page beyond the current window bounds. |
--selector="CSS selector" |
Captures one matching element and its descendants. |
--filename=name.png |
Sets the output filename; use a PNG extension. |
--delay=seconds |
Waits before capture, useful for a hover state or open menu. |
--dpr=number |
Sets device pixel ratio for the capture. |
--clipboard |
Copies the screenshot to the clipboard. By itself, it prevents file saving. |
--file |
Forces saving to a file, including when clipboard output is also requested. |
For example, copy a full-page image to the clipboard and also save it:
:screenshot --fullpage --clipboard --file --filename=full-page.png
Repeated captures to the same filename overwrite the earlier file, so change the name when keeping multiple versions. Firefox may append -fullpage to the filename when full-page mode is used. See the complete Firefox screenshot option reference.
Make the capture presentation-ready
- Set the scope first. Decide whether the story needs one component, one screen, or a long-page overview.
- Prepare the page state. Navigate to the right URL, dismiss obstructive menus where appropriate, and wait for visible content to settle. Use the Console delay for timed UI states.
- Capture and inspect. Check for clipped edges, incomplete images, unwanted overlays, personal information, and content that will be too small on the slide.
- Place it at presentation size. View the image at its intended slide size and crop only if doing so does not remove context needed to understand it.
Firefox’s Save full page and Save visible screenshot choices are also described by Mozilla Support. The DevTools workflow is useful when you need explicit full-page or element capture controls.
Common problems and fixes
| Problem | Likely cause | Fix |
|---|---|---|
| No screenshot button appears | The toolbox button is not enabled, or the tool layout differs in this Firefox version. | Enable Take a screenshot of the entire page under Available Toolbox Buttons, or use :screenshot in the Web Console. |
| The image includes only what is visible | The capture was a viewport capture. | Use the full-page screenshot button or add --fullpage to the Console command. |
| The image is too tall to read on a slide | A long page was reduced to fit the slide. | Capture a viewport or a single relevant element, or split the story across slides. |
| An element capture is empty or wrong | The wrong node was selected or the selector matched an unexpected element. | Verify the selected node in Inspector; for Console capture, use a more specific CSS selector. |
| A menu or transient state is missing | It closed before capture or had not appeared yet. | Open the state first and add --delay so it has time to render. |
| The previous image disappeared | A later capture reused the same filename and overwrote it. | Use a different filename for each version. |
| The image is copied but no file appears | --clipboard copies to clipboard and prevents saving unless --file is also present. |
Add --file and a filename when you need both. |
| The output looks unexpectedly scaled | A non-default --dpr changed the image sampling. |
Remove the option or try a different ratio, then inspect the result at slide size. |
Performance, reliability, and cost
For an occasional presentation screenshot, Firefox’s built-in tools require no API key or paid screenshot service. Full-page captures include content outside the current window and can produce large images; capturing only the relevant viewport or node keeps the deliverable focused. A Console delay can help with transient UI, but it does not guarantee that a slow or dynamically loaded page has finished rendering. Inspect the saved image before using it.
Firefox is also a practical choice when you need a manual, visible workflow and want control over the page state. If screenshots need to run repeatedly in a script or service, a hosted screenshot API can avoid maintaining browser automation setup; account for the service’s own plan and capture behavior when estimating cost.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request can return a PNG, JPEG, WebP, or PDF. For example, with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
See the ScreenshotNeo API documentation for request options. Python:
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)
Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);
ScreenshotNeo removes cookie banners, 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 shots.
Sign up free for 1,000 screenshots a month with no card.
FAQ
Will a page screenshot include Firefox’s toolbar?
No. Firefox’s page screenshot tools capture page content, not the whole desktop window with browser controls.
Can I copy the screenshot instead of downloading it?
Yes. Enable Screenshot to clipboard in Developer Tools settings or use the Console’s --clipboard option.
Should I use a full-page image in a slide?
Only when the overview is the point and the text remains legible at slide size. For detailed content, a viewport or element capture is usually easier to read.


