How to Take a Mobile Website Screenshot with Firefox Responsive Design Mode
Set a mobile viewport in Firefox Responsive Design Mode and save a screenshot. Learn the difference between viewport and full-page capture, plus practical fixes.
To take a mobile website screenshot in Firefox, open Responsive Design Mode (RDM), set the device or viewport size, then click the camera button at the right end of the RDM controls. Firefox saves the screenshot to its default download location. This captures the simulated viewport; use Firefox’s separate full-page screenshot controls if you need the entire page.
1. Open Responsive Design Mode
- Open the page you want to capture in Firefox.
- Open RDM with Ctrl + Shift + M on Windows or Linux, or Command + Option + M on macOS. You can also find it under Browser Tools or Tools, depending on your menu configuration.
- Wait for the page to render at the simulated viewport size before taking the screenshot.
RDM lets you inspect how a site appears and behaves with selected device characteristics. It is a browser simulation, not a capture from the physical phone or tablet represented by a device profile. See Mozilla’s Responsive Design Mode documentation.
2. Set the mobile viewport
Choose a device profile from the RDM toolbar, or enter the viewport width and height directly. A profile can also provide a device pixel ratio (DPR), touch simulation, and user-agent value. You can change orientation and adjust the viewport dimensions to check a particular layout.
- Device profile: A convenient starting point when you want a named device configuration.
- Width and height: Use these when you need a specific CSS viewport or want to check a breakpoint.
- Orientation: Switch between portrait and landscape to inspect both layouts.
- DPR: Changes the simulated device pixel ratio. The saved image’s pixel dimensions may differ from its CSS viewport dimensions.
- Touch and user agent: Profiles can supply these characteristics to help inspect behavior that responds to them.
A selected device is not a guarantee that the result will match every detail of that physical device. Treat the screenshot as the page rendered in Firefox with the configured simulation.
3. Capture the visible mobile viewport
- Confirm the page is at the intended viewport size and orientation.
- Click the camera button at the right end of the RDM controls.
- Find the image in Firefox’s default download location.
If Screenshot to clipboard is enabled in DevTools Settings, Firefox also copies the screenshot to the clipboard. The camera button captures the responsive viewport currently shown; it is not the full-page capture command.
4. Capture a full page at a mobile width
For a full-page screenshot, keep the desired mobile dimensions configured in RDM and use one of Firefox’s separate full-page paths:
- Enable the DevTools full-page screenshot button: Open DevTools Settings, find Available Toolbox Buttons, and enable the full-page screenshot button. Then use that button while the page is configured in RDM. Mozilla documents this separately from the RDM camera button in its screenshot documentation.
- Use the Web Console helper: Run
:screenshot --fullpagein the Web Console. The helper also supports--dpr,--delay,--filename, and--clipboard. See Mozilla’s Web Console helpers documentation for current syntax.
Full-page capture and viewport capture serve different purposes. Use the RDM camera for the visible mobile viewport; use a full-page path when the output must include content beyond the visible area.
5. Choose the right Firefox capture path
| What you need | Firefox path | What it captures |
|---|---|---|
| Mobile viewport | RDM camera button | The current responsive viewport |
| Whole page at the configured width | DevTools full-page screenshot button or :screenshot --fullpage |
The full page; use RDM to configure the simulated mobile viewport |
| A region, page part, visible view, or full page | Firefox Screenshots | A selected region or page area, the visible portion, or the full page |
Firefox Screenshots is a different built-in feature. Open Take Screenshot from the page context menu or press Ctrl + Shift + S on Windows or Linux, or Command + Shift + S on macOS. Choose the area or page portion, then download or copy it. See Firefox Screenshots help.
6. Get a screenshot through an API instead
If you need repeatable captures in a script or build workflow, ScreenshotNeo provides a website screenshot API and an MCP server for developers. The API returns a screenshot or PDF from a GET request. The examples below capture a mobile-sized viewport; see the ScreenshotNeo API documentation for supported parameters and options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-d width=390 \
-d height=844 \
-o shot.webpPython
import requests
response = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={
"access_key": "YOUR_API_KEY",
"url": "https://stripe.com",
"width": 390,
"height": 844,
},
timeout=90,
)
response.raise_for_status()
with open("shot.webp", "wb") as image_file:
image_file.write(response.content)Node.js
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com',
width: '390',
height: '844',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));ScreenshotNeo also supports device presets, full-page capture, element capture, dark mode, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, user agents, geolocation, caching, async jobs, bulk capture, PDF output, and other options. The response includes X-Page-Verdict and X-Billed headers; only clean shots are billed, while bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. It also offers an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Learn more at ScreenshotNeo.
Or skip the browser setup
Make a single request for a mobile-sized capture:
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-d width=390 \
-d height=844 \
-o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets 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.
Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| The shortcut does not open RDM | The shortcut differs by operating system, or focus is in a context that handles it. | Use Ctrl + Shift + M on Windows/Linux or Command + Option + M on macOS. Alternatively, open RDM from the Browser Tools or Tools menu. |
| The image is not in the clipboard | Clipboard copying depends on the DevTools setting. | Check DevTools Settings for Screenshot to clipboard. The screenshot is also saved to Firefox’s default download location. |
| The screenshot only shows the visible area | The RDM camera captures the responsive viewport. | Enable the DevTools full-page screenshot button in Available Toolbox Buttons, or run :screenshot --fullpage in the Web Console. |
| The mobile layout does not match a phone | RDM simulates configured browser characteristics; it is not the physical device. | Check viewport dimensions, orientation, DPR, touch, and the profile’s user-agent setting. Confirm the result on the actual device if physical-device behavior matters. |
| A site looks different after changing dimensions | The page may respond to viewport breakpoints or need time to update after resizing. | Wait for the layout and dynamic content to settle, then capture. For delayed page behavior, the Web Console helper has a --delay option. |
| Network throttling does not reproduce an exact speed test | RDM throttling is an approximation of download speed, upload speed, and minimum latency. | Use it to inspect behavior under simulated network conditions, not as an exact performance measurement. |
Performance, reliability, and cost
- Capture timing: Dynamic content, animations, and lazy-loaded images may change what appears in a screenshot. Let the page settle before using the camera; for full-page capture, consider the documented delay option where appropriate.
- Simulation limits: RDM is useful for responsive inspection, but its network throttling is approximate and a device profile does not turn the browser into the physical device.
- File location: The RDM camera saves to Firefox’s default download location. Clipboard behavior is controlled by DevTools Settings.
- Cost: The built-in Firefox workflow has no screenshot API request or API usage charge. For automated captures, ScreenshotNeo’s Free plan has 1,000 shots per month with no card; paid plans start at $5 for 3,000, and every feature is on every plan. Yearly billing gives two months free.
FAQ
How do I save a mobile view screenshot in Firefox?
Open RDM, select or enter the mobile viewport, then click its camera button. Firefox saves the image to its default download location.
Can Firefox Responsive Design Mode take a full-page screenshot?
The RDM camera captures the responsive viewport. For the full page, enable the separate DevTools full-page screenshot button or use :screenshot --fullpage in the Web Console.
Does the device selector reproduce a real phone?
No. It configures a browser simulation with device characteristics such as viewport dimensions, DPR, touch, and user agent. It is not equivalent to testing on the physical device.
Can I copy the RDM screenshot instead of downloading it?
Yes, if Screenshot to clipboard is enabled in DevTools Settings. Firefox also saves the screenshot to its default download location.
