How to Capture a Website Screenshot of a Localhost Page on Mac

To capture the visible part of a localhost page on a Mac, open the running page in a browser, press Shift-Command-4, and drag around the page content. Press Shift-Command-3 to capture the entire display. These macOS shortcuts save a screenshot file; they do not capture the page’s full scrollable height.

1. Capture the visible localhost page

1. Start your development server with the command your project uses, then open its localhost address in Safari, Chrome, or another browser. The command and port depend on your project.
2. Arrange the browser window and scroll to the page state you want to show. Close unrelated tabs or panels and wait for the page to finish rendering.
3. Press Shift-Command-4. The pointer becomes a crosshair. Drag a rectangle around the browser page area, then release to take the screenshot.
4. Use Shift-Command-3 instead if you want the full display, including the desktop and surrounding context.

macOS normally saves screenshots to the desktop unless you have changed the destination. For on-screen capture controls, press Shift-Command-5, open Options, and choose a destination under Save to. The available choices can vary by macOS version. You can also edit a capture from its thumbnail when it appears.

2. Set a repeatable browser viewport

If you need a screenshot at a particular width, height, or display pixel ratio, set the browser viewport before using the Mac capture shortcut. This is useful for documenting responsive layouts or comparing a page across screen sizes.

Safari

1. Enable Safari’s developer features if the Develop menu is missing: open Safari Settings, choose Advanced, and enable Show features for web developers.
2. Open your localhost page and choose Develop > Enter Responsive Design Mode, or press Control-Command-R.
3. Choose the desired preview dimensions and pixel ratio, arrange the page state, then use Shift-Command-4 to capture the visible browser content.

Responsive Design Mode changes the browser preview. The final image is still a screenshot of the visible screen area.

Chrome

Open DevTools and press Command-Shift-M to toggle Device Mode on Mac. Set the viewport you need, then capture the visible area with the macOS screenshot controls. This shortcut enables Device Mode; it does not by itself save a screenshot.

3. Choose the right capture scope

What you need	Approach	What it captures
Just the page area currently visible	Shift-Command-4 and drag	A selected rectangle of screen pixels
The full display, including context around the browser	Shift-Command-3	The entire display
A page shown at a controlled viewport	Set Safari Responsive Design Mode or Chrome Device Mode, then use a Mac screenshot shortcut	The visible preview region on screen
The whole long, scrolling document	Use a browser full-page capture workflow that is verified for your browser and version, or a screenshot tool with full-page capture	The document beyond the current viewport, when supported

A selected-region screenshot is not a full-page capture. It records pixels in the selected area, so content below the current viewport will not appear. Verify the current browser’s full-page workflow before relying on it; the Mac shortcuts described here do not provide that behavior.

4. Save and locate the screenshot

For the quickest workflow, leave the default destination in place and check the desktop. If the file is elsewhere, press Shift-Command-5, open Options, and inspect Save to. Choose a destination that fits your workflow, such as a folder for project documentation. macOS may show a thumbnail after capture; use it to make a quick edit or dismiss it to let the file save.

For clean, repeatable documentation, keep the browser size, zoom level, scroll position, and page state consistent between captures. If the page depends on local data or a logged-in session, reproduce that state before taking the screenshot.

5. Troubleshooting

Problem	Likely cause	What to do
The screenshot is not on the desktop	The save destination was changed in Screenshot controls.	Press Shift-Command-5, open Options, and check Save to.
The screenshot cuts off content lower on the page	The shortcut captured only the selected on-screen rectangle.	Scroll to the section you need, take multiple captures, or use a verified browser full-page capture method.
The selection shortcut did not start a capture	A conflicting shortcut, keyboard setup, or system setting may be interfering.	Open Screenshot controls with Shift-Command-5 and choose a capture mode from the toolbar.
Safari has no Develop menu	Safari’s developer features are not enabled.	In Safari Settings > Advanced, enable Show features for web developers, then reopen the menu.
The responsive preview is the wrong size	The browser is using a different viewport or pixel ratio from the one intended.	Set the dimensions and ratio in Responsive Design Mode or Device Mode before capturing.
The page looks unfinished or blank	The local server may not be running, the wrong localhost address may be open, or the page may still be loading.	Check the project’s normal server command and address, wait for rendering to finish, then capture again.
The screenshot includes browser chrome or other desktop areas	The selected rectangle includes more than the webpage.	Use Shift-Command-4 and drag more carefully around the content, or resize the browser first.

6. Performance, consistency, and cost

The built-in shortcut is the fastest setup for a one-off visible capture: it needs no additional screenshot software or service. Its scope is limited to what is on screen, and repeatability depends on keeping window size, viewport, scroll position, and page state consistent. For long pages or captures you need to reproduce across many URLs, use a browser workflow or capture service that supports the required scope and verify its behavior before adopting it.

For local development, the Mac screenshot controls have no per-capture service charge. A hosted screenshot API can add convenience for automated captures, but account for its plan limits and the fact that it must be able to reach the target page. A localhost address on your Mac is not automatically accessible to a remote service; use a reachable URL for hosted capture.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API captures a URL with one GET request. The URL must be reachable by the service, so a private localhost page on your Mac cannot be captured directly; for a local project, use the desktop method above or provide a reachable development URL.

For an accessible page, this cURL example saves a WebP screenshot. See the ScreenshotNeo API documentation for 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

Equivalent Python:

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)

Equivalent 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, newsletter popups, and chat widgets before capture. 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. All features are on every plan.

Create a free ScreenshotNeo account for 1,000 screenshots a month with no card.

FAQ

Can I capture a localhost page if my development server is not running?

No. Open the page served by your running project first; the screenshot shortcut captures what the browser displays.

Does Responsive Design Mode save the screenshot?

No. It previews a chosen viewport. Use macOS screenshot controls to save the visible preview.

Can a remote screenshot API capture my Mac’s localhost URL?

Not unless that page is reachable by the service. A localhost address usually refers to the machine making the request, so use a local capture method or a reachable development URL.

What should I use for a full-page image?

Use a browser’s full-page capture workflow or a screenshot API with full-page support, checking the current instructions and behavior for your chosen tool.