How to Capture a Scrolling Screenshot of a Web App for a User Guide

To capture a scrolling screenshot of a web app for a user guide, use your browser’s developer tools to capture the full page. In Chrome, open DevTools, enable Device Mode, then choose More options → Capture a full size screenshot. In Firefox, enable Take a screenshot of the entire page in DevTools settings, then click the screenshot button. Before inserting the image, inspect it for missing content, clipping, repeated sticky elements, or a state that changed during capture.

A full-page screenshot is useful when the guide needs to show a long screen as one image. For a focused instruction, a viewport, selected area, or individual element screenshot may be easier to read.

1. Prepare the exact app state

Navigate to the screen the guide needs to explain. Set the relevant filters, tabs, account state, or expanded sections first. Close menus, dialogs, and notifications unless the guide is specifically teaching the reader about them.

Use the same account state and data you intend to document.
Wait for the page to finish loading and for visible content to settle.
Check whether the content continues below the browser viewport.
Decide whether one tall image will be readable in the guide. If the screen has several distinct steps, separate captures may communicate them more clearly.

For a responsive layout, set the viewport width before capturing. Chrome Device Mode can simulate viewport dimensions and device pixel ratio, but it is an approximation of a mobile device rather than a real device. See Chrome’s Device Mode documentation.

2. Capture the full page in Chrome

Open the web app in Chrome and navigate to the intended state.
Open DevTools: right-click the page and choose Inspect, or use the browser’s DevTools shortcut.
Turn on Device Mode with the device toolbar button in DevTools.
Set the viewport dimensions if the guide documents a particular screen size.
Open the Device Mode More options menu and select Capture a full size screenshot.
Open the downloaded image and inspect the entire capture before adding it to the guide.

Chrome documents that this command captures the whole page, including content outside the viewport. The neighboring Capture screenshot command captures only what is currently visible. See Chrome Device Mode screenshot controls.

For a selected rectangle rather than the whole page, open the DevTools Command Menu with Ctrl+Shift+P on Windows or Linux, or Command+Shift+P on Mac. Type screenshot, choose Capture area screenshot, and drag over the page. Chrome notes that area capture does not work when DevTools is undocked. See Chrome’s Command Menu documentation.

3. Capture the full page in Firefox

Open Firefox DevTools and its settings.
Under Available Toolbox Buttons, enable Take a screenshot of the entire page.
Return to the DevTools toolbar and click the screenshot button.
Find the saved image in your Downloads directory and inspect it.

Firefox’s documentation also describes a Web Console :screenshot helper for full-page, delayed, device-pixel-ratio, filename, and element captures. For example, to save the full page:

:screenshot --fullpage

To capture one element instead, use a CSS selector:

:screenshot --selector ".settings-panel" --filename settings-panel.png

Firefox documents options including --clipboard, --delay, --dpr, --file, --filename, --fullpage, and --selector. A filename should use the .png extension; reusing a filename overwrites the prior capture. Consult Firefox’s screenshot documentation for the current command details.

4. Choose the right capture scope

Capture	Use it when	Browser workflow
Full page	The reader needs to see the entire long screen in one image.	Chrome: Capture a full size screenshot. Firefox: enable the full-page screenshot button.
Viewport	The instruction concerns only the currently visible area, or a very tall image would be hard to read.	Chrome: More options → Capture screenshot.
Selected area	You need a cropped region of the current page.	Chrome: Command Menu → Capture area screenshot.
Single element	The guide explains one component, such as a panel or card.	Firefox: Inspector HTML pane → element context menu → Screenshot Node; or use the documented Web Console selector option.

These workflows are documented by Chrome and Firefox. Pick scope based on what the reader must understand, not just on how much content the page contains.

5. Verify the image before publishing

The saved image is the source of truth. Full-page capture does not guarantee that every app interface will render as intended. Review it at readable size and check:

Coverage: Are the sections the guide refers to present?
Sticky UI: Did a fixed header, navigation bar, or floating control repeat or cover content?
Nested scrolling: Is the important content inside a panel that scrolls independently from the document?
Lazy content: Did images, charts, or rows appear only after scrolling or waiting?
Dynamic state: Did a notification, timer, carousel, or live value change during capture?
Readability: Is text still legible at the size it will appear in the guide?

If the result misses a section or compresses text too much, capture separate viewport or element images and refer to them in sequence. Label each image so readers can connect it to the relevant step.

6. Automate repeatable captures with ScreenshotNeo

If you need repeatable screenshots for guides, release notes, or a batch of URLs, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF. Its full-page option loads lazy images; it also supports element capture, viewport and device presets, custom CSS and JavaScript, selector or delay waits, and other capture controls. See the ScreenshotNeo API documentation for parameter details.

Store your API key in an environment variable and avoid committing it to source control. These examples use the API’s documented endpoint and save a WebP response.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

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)

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 bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Or skip the browser setup

With ScreenshotNeo, cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

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

7. Troubleshooting

Symptom	Likely cause	What to try
The image stops at the visible viewport.	A viewport capture command was used instead of full-page capture.	In Chrome, choose Capture a full size screenshot. In Firefox, enable the full-page screenshot button or use `:screenshot --fullpage`.
A panel’s lower content is missing.	The app uses a nested scroll container rather than a long document.	Scroll the panel into the state you need and capture that element or area; if necessary, document it with multiple images.
Images or data are absent.	Lazy loading, delayed rendering, or a request that has not finished.	Wait for the component to appear before capture. For a repeatable process, use a selector or delay wait in an API workflow, then inspect the result.
Sticky navigation overlaps or repeats.	Fixed-position UI may not translate cleanly to a tall capture.	Try capturing the relevant viewport or component instead, or use multiple sequential screenshots.
The wrong menu or dialog appears.	The app state was not prepared consistently before capture.	Close transient UI or deliberately open the interface the guide is explaining, then capture again.
Firefox does not show a screenshot button.	The toolbox button is disabled by default.	Enable Take a screenshot of the entire page under DevTools settings → Available Toolbox Buttons.
Firefox saved over a previous image.	The same filename was reused.	Choose a distinct `--filename` for each capture.

8. Performance, reliability, and cost

For a one-off guide image, browser DevTools avoids API setup and direct service charges. A full-page image can become very tall, however, and may be cumbersome to inspect or place in a guide; split captures when a single image becomes difficult to read. Allow time for app content and lazy-loaded assets to settle, and review each output because dynamic pages can change while being captured.

For repeatable or programmatic work, an API can standardize dimensions and wait behavior and support batches. ScreenshotNeo offers bulk capture for up to 100 URLs per call and selectable cache TTL; cache hits cost nothing. It bills only clean shots, while bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Plans are Free: 1,000 per month; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan. These are product plan details, not a guarantee of capture time or fidelity; inspect output for the app state you need.

FAQ

Does a scrolling screenshot capture content in an inner scroll panel?

Not necessarily. Full-page capture targets the page document; an independently scrolling panel may need its own element capture or several screenshots of the panel’s states.

Should a user guide use one tall screenshot or several smaller ones?

Use one when the page’s vertical structure matters and its text remains readable. Use several when the guide needs to focus attention on separate controls or steps.

No. A DevTools screenshot saves an image of a page. Chrome’s Captured Surface Control API concerns a web app that has already started capturing a browser tab; it is a different workflow. See Chrome’s captured surface documentation.

Are these exact steps verified for Edge and Safari?

The workflows here are sourced for Chrome and Firefox. Check the current official documentation for other browsers rather than assuming the menus match.