How to Capture a Mobile Website Screenshot in Safari Web Inspector

To capture a mobile-sized website preview on a Mac, open the site in Safari, choose Develop > Enter Responsive Design Mode (Control-Command-R), set the viewport, then use macOS screen capture to save the visible preview. Use Develop > Show Web Inspector to inspect and debug the page while you work. Safari’s documented Web Inspector workflow does not include a command to export a screenshot.

Capture a mobile viewport on your Mac

Open the website in Safari on macOS.
If the Develop menu is missing, enable Safari’s developer features in Safari settings. The exact setting label can vary by Safari release. See Apple’s instructions for enabling developer features.
With the page focused, choose Develop > Enter Responsive Design Mode, or press Control-Command-R. Apple documents this mode for previewing responsive layouts at different viewport sizes. Apple Responsive Design Mode documentation.
Select a preset or enter the width and height you need. Adjust orientation and pixel ratio if relevant to the layout you are checking.
Optionally choose Develop > Show Web Inspector. Inspect the DOM, styles, scripts, or network activity, then adjust the page or viewport. Inspector is the debugging part of this workflow; it is not the documented image-export step. Apple Safari developer tools documentation.
Capture the visible Safari preview using macOS screenshot controls. Keep the preview unobscured and at the desired dimensions. Save the resulting screenshot where you can find it.

This produces an image of the visible preview. It is not automatically a full-page capture of content below the viewport. If you need the entire page or a repeatable capture across many URLs, see the alternatives below.

Choose the right Safari capture workflow

Workflow	Device fidelity	Capture scope	What you need
Responsive Design Mode plus macOS screenshot	Approximate mobile viewport	Visible preview	Mac running Safari
Responsive Design Mode opened in Simulator	More representative simulator behavior than a preset	Visible simulator view captured with system screenshot controls	Mac and installed Simulator
Remote Web Inspector with iPhone or iPad	Actual device and live page behavior	Capture the device screen using its screenshot workflow	Mac and iPhone or iPad
Native iPhone Full Page screenshot	Actual Safari page on iPhone	Content beyond the screen, including the whole webpage	iPhone

Responsive Design Mode presets are approximations, not exact representations of device layout, rendering, and behavior. Apple points to Simulator when more accurate behavior matters; address bar space, the on-screen keyboard, and device-specific form controls can affect a real device. Apple Responsive Design Mode documentation.

Inspect a real iPhone or iPad from your Mac

Use remote Web Inspector when the issue depends on actual iOS or iPadOS behavior rather than a simulated viewport.

On the iPhone or iPad, enable Settings > Apps > Safari > Advanced > Web Inspector. Labels may differ slightly by operating system release.
Connect the device to your Mac and respond to any trust prompt.
Open the page on the device in Safari. On the Mac, open Safari’s Develop menu, select the device, then select the page.
Inspect the live page on the Mac. Capture the screen from the device when you need an image of the actual device display.

Apple documents enabling inspection on iPhone and iPad and connecting the device to Safari on Mac. After an initial wired setup, the device submenu can provide a Connect via Network option. Apple: Inspecting iOS and iPadOS.

Capture a full webpage on iPhone

For a whole-page capture directly on iPhone, take a screenshot while viewing the page in Safari, open its preview, and choose Full Page. This is a native screenshot workflow separate from Web Inspector. Apple Support describes Full Page capture for content beyond the visible screen, including an entire Safari webpage. Apple Support: Take a screenshot on iPhone.

Or skip the browser setup

For a repeatable mobile viewport screenshot from code, call ScreenshotNeo’s screenshot API. It returns an image or PDF from one GET request. Set a mobile viewport using the API’s viewport options; the documentation lists the available parameters and accepted names. Read the ScreenshotNeo API documentation.

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,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Use the API’s viewport settings to request the dimensions you need. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo.

Troubleshooting

Symptom	Likely cause	What to do
There is no Develop menu	Safari developer features are not enabled.	Open Safari settings and enable developer features in the Advanced settings. Consult Apple’s current instructions because labels can change.
The preview does not match the iPhone	Responsive Design Mode uses an approximation; browser chrome, keyboard, or device-specific controls may change behavior.	Open the page in Simulator or inspect it on a connected iPhone or iPad.
The screenshot only shows part of the page	macOS screen capture records the visible preview.	Scroll and capture additional sections, use Full Page on iPhone, or use an API configured for full-page capture.
The device does not appear in Develop	Web Inspector may be disabled on the device, the trust prompt may not have been accepted, or the device may not be connected.	Enable Web Inspector in device Safari settings, reconnect and accept trust, then reopen Safari on both devices. For network inspection, first complete the wired setup and enable Connect via Network if offered.
Safari’s screenshot includes a banner or chat widget	Native screenshot capture records what the page displays.	Dismiss it manually, adjust the page for your test, or use a capture workflow that can remove supported overlays.

Accuracy, performance, and reliability

Match the question to the method. Use Responsive Design Mode for quick responsive layout checks, Simulator or a real device for behavior-sensitive debugging, and iPhone Full Page capture for a whole webpage.
Keep captures reproducible. Record the viewport dimensions, orientation, pixel ratio, URL, and page state. Dynamic content, delayed images, and consent prompts can change between captures.
Check what the image actually contains. A visible-preview capture can include Safari chrome or miss content below the viewport. Frame the page consistently and verify the saved image before sharing it.
For repeat captures, automate the capture request. ScreenshotNeo supports viewport selection, full-page capture with lazy images loaded, waits, caching with a chosen TTL, and bulk capture for up to 100 URLs per call. These options can reduce repetitive manual work; no speed benchmark is implied.
Account for cost before scaling. ScreenshotNeo’s free plan is 1,000 shots per month with no card. Paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free. Every feature is on every plan. Only clean shots are billed.

FAQ

Can Web Inspector save a screenshot directly?

Apple’s reviewed Web Inspector documentation describes inspection and debugging, not a screenshot-save command. Use system screenshot controls for the visible preview.

Can I set a custom iPhone viewport?

Yes. Responsive Design Mode lets you choose a preset or adjust viewport dimensions, orientation, and pixel ratio.

Does Responsive Design Mode reproduce every iPhone behavior?

No. It approximates a device. Use Simulator or a real iPhone when browser interface behavior, keyboard behavior, or device-specific controls matter.

Can I capture a full Safari page on iPhone?

Yes. Use the screenshot preview’s Full Page option. This is separate from inspecting the page from a Mac.