How to Take a Full-Page Screenshot of a Web App in Chrome on MacBook Pro
Capture an entire web app page in Chrome on your MacBook Pro with DevTools, including content below the fold. Learn which capture mode to use and how to troubleshoot it.
To capture an entire web app page in Chrome on a MacBook Pro, open Chrome DevTools, turn on the Device toolbar, then choose More options → Capture a full size screenshot. Chrome captures the whole page, including content below the visible viewport. The regular Capture screenshot command captures only the current viewport. Chrome’s Device Mode documentation describes both commands.
Take a full-page screenshot
- Open the web app page in Chrome and wait for the content you need to appear.
- Open DevTools. On Mac, Option+Command+I is a common shortcut. If it does not work in your setup, open DevTools from Chrome’s menus.
- In DevTools, click Toggle device toolbar. This opens Device Mode controls above the page.
- Open the device toolbar’s More options menu and select Capture a full size screenshot.
- Locate the downloaded image using Chrome’s download indicator or your configured download location. The filename and folder depend on your Chrome settings.
The command captures the full page rather than only what is currently on screen. If you want the screenshot to reflect a mobile layout, choose a device profile or set responsive dimensions in the Device toolbar before capturing. Device Mode simulates a mobile experience on your computer; it is not a capture from a physical phone.
Choose the right screenshot command
| Command | What it captures | When to use it |
|---|---|---|
| Capture a full size screenshot | The full page, including content beyond the visible viewport. | Use this for a complete, vertically long page. |
| Capture screenshot | The current viewport. | Use this for the visible screen only. |
| Capture area screenshot | A region you select by dragging. | Use this for a specific part of the page, not the whole document. DevTools must be docked for area capture. |
| Capture node screenshot | A selected HTML element. | Use this when you need one component or element rather than the page. Select the element in the Elements panel, then search the Command Menu for the command. |
Chrome documents the full-page, viewport, and Device Mode workflows in its Device Mode guide. For an area capture, open the Command Menu on Mac with Command+Shift+P, type “screenshot,” and choose Capture area screenshot. See Chrome’s Command Menu guide for the steps and the docked-DevTools limitation. The node command is also documented in a historical Chrome DevTools article; command availability or wording may differ in a current Chrome version.
Capture a responsive or mobile layout
- Open the Device toolbar in DevTools.
- Use its Dimensions control to select a device profile or enter responsive viewport dimensions.
- Wait for the page to reflow and for the content you need to load.
- Choose Capture a full size screenshot from the toolbar’s More options menu.
This is an emulated viewport on your Mac. If the result depends on real device hardware, browser behavior, or a device-specific environment, Device Mode alone does not establish what the page looks like on an actual phone.
Prepare long or dynamic web app pages
A full-size capture can include content that is outside the viewport, but a screenshot can only show what the page has rendered when Chrome captures it. Before taking the image:
- Wait for loading indicators, asynchronous data, and animations to settle.
- Scroll through the page if its app loads images or sections only when they approach the viewport, then return to the top and capture.
- Dismiss dialogs or menus that cover the content if you do not want them in the image.
- Check the page at the intended viewport size, especially when comparing desktop and responsive layouts.
- For a single chart, card, or other element, use a node capture when available instead of capturing the entire page and cropping it afterward.
Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| The image shows only the visible screen. | You selected Capture screenshot, which captures the viewport. | Open More options in the Device toolbar and select Capture a full size screenshot. |
| The full-page command is hard to find. | The device toolbar is not enabled, or the menu differs in your Chrome version. | Enable the Device toolbar in DevTools. If the menu label differs, open the Command Menu and search for “screenshot” to inspect the available commands. |
| Area capture is unavailable or does not work. | DevTools is undocked. Chrome documents this limitation for area capture. | Dock DevTools, then open the Command Menu with Command+Shift+P and select Capture area screenshot. |
| Images or app sections are missing. | They may load only after scrolling, or the page may not have finished rendering. | Wait for loading to finish; scroll through lazy-loaded sections, return to the desired starting position, and capture again. |
| The page looks different from a phone. | Device Mode simulates a mobile experience on the computer. | Check the selected dimensions and device profile. For behavior that depends on a real device, verify on that device separately. |
| You cannot find the downloaded file. | Chrome’s download folder or filename depends on local settings. | Use Chrome’s download indicator to open the file or check the download location configured in Chrome. |
Or skip the browser setup
If you need repeatable screenshots from code, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF. Its API documentation covers request options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
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)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}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; each cleanup step can be turned off. Bot checks, blank pages, and failed loads are never billed, and response headers report the page verdict and billing status. 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.
Sign up for 1,000 free screenshots a month, with no card required.
Performance, reliability, and cost
Chrome’s built-in DevTools capture is a direct option for a one-off screenshot on your MacBook Pro; the documented workflow does not require a paid screenshot app. For dynamic pages, the main practical reliability step is to wait for the content you need to render and trigger lazy-loaded content before capture. Device Mode is useful for checking responsive layouts, with the limitation that it is an emulation.
For recurring or automated captures, an API can avoid repeating the manual browser steps. ScreenshotNeo offers caching with a configurable TTL, asynchronous jobs with signed webhooks, and bulk capture for up to 100 URLs per call. Its plans are Free: 1,000 shots/month; 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, and every feature is available on every plan. Check the [API docs](https://screenshotneo.com/docs/) for configuration details before building an automated workflow.
FAQ
Does a full-page screenshot include content below the fold?
Yes. Choose Capture a full size screenshot; the ordinary screenshot command is limited to the viewport.
Can I capture only part of the page?
Yes. Use Capture area screenshot from the Command Menu. DevTools must be docked for this command.
Can I capture a mobile version on my MacBook Pro?
Yes. Set a device profile or responsive dimensions in Device Mode first. This simulates a mobile viewport on your computer.
Do I need a screenshot extension for a basic full-page capture?
No. Chrome DevTools includes a full-size screenshot command.
