How to Capture a Screenshot of a Website That Requires Login in Chrome DevTools

To capture a screenshot of a page that requires login, sign in through the website normally, open the page in that same Chrome tab, and capture the page with DevTools. Your existing browser session lets the page render as it does for you; you do not need to copy or export login cookies.

Use Capture a full size screenshot for the whole document, including content below the viewport. Use Capture screenshot for the current viewport, or Capture area screenshot to select a crop. Chrome documents the full-page and viewport options in its Device Mode guide.

1. Sign in and prepare the page

1. Open Chrome and sign in using the website’s normal login flow.
2. In the same tab, navigate to the exact page you need to capture.
3. Wait for the page content to load. Open any menus or overlays you want included, and close anything you do not want in the image.
4. Scroll or adjust the page only if you are preparing a viewport capture. For a full-size capture, the page can include content outside the currently visible area.

Websites commonly use cookies to manage sessions. Keeping the page in the browser where you signed in is the straightforward way to capture its authenticated state; Chrome explains session cookies in its cookie guide.

2. Capture the full page or visible viewport

1. Open DevTools using Chrome’s menu or your usual keyboard shortcut.
2. Turn on the device toolbar with the Toggle device toolbar control.
3. In Device Mode, open the More options menu.
4. Choose Capture a full size screenshot to capture the complete document, or Capture screenshot to capture the viewport.
5. Open the saved image and confirm it shows the intended page and content.

Chrome’s Device Mode documentation describes the full-size option as including content that is not visible in the viewport. If the menu wording or controls differ in your Chrome installation, consult the current Device Mode instructions.

Which capture should you choose?

What you need	DevTools option	What it captures
Entire page	Capture a full size screenshot	The full document, including content beyond the viewport
What is currently on screen	Capture screenshot	The visible viewport in Device Mode
A specific region	Capture area screenshot	A rectangle you select on the page
Frames while a page loads	Network panel’s Capture screenshots setting	Images of page-loading states after reload, not a one-off capture of the current page

3. Capture a selected area

1. Keep DevTools docked to the browser window. Area capture does not work when DevTools is undocked, according to Chrome’s Command Menu guide.
2. Open the Command Menu with Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
3. Type screenshot.
4. Select Capture area screenshot, then drag over the part of the page to capture.
5. Review the saved image to confirm the crop is correct.

4. Keep page-load screenshots separate

The Network panel has a separate screenshot feature for recording frames as a page loads. To use it, open Network settings, enable Capture screenshots, and reload while the Network panel is focused. This records loading states; it is not the normal method for taking a single screenshot of the page as it currently appears. See Chrome’s Network features reference.

5. Protect private information

A screenshot shows whatever the authenticated page renders. Before sharing it, inspect the image for account names, private messages, billing details, internal records, or other information that should not be disclosed. Follow your organization’s rules for handling confidential content.

A screenshot and a network log are different artifacts. If troubleshooting also requires a HAR export, Chrome’s sanitized export excludes sensitive request headers such as Cookie, Set-Cookie, and Authorization by default. Including sensitive data is a separate export option. Avoid sharing a sensitive HAR unless it is needed and the recipient is appropriate; see the Network reference.

6. Troubleshooting

Problem	Likely cause	What to do
The screenshot shows a login page or access interstitial	The session expired, sign-in did not complete, or the target page has not loaded in the tab.	Check the page in Chrome first, sign in through the normal flow if needed, navigate back to the target, wait for it to render, and capture again.
The full-page image is missing content	Some page content loads only after scrolling or after a delay.	Wait for the page to settle. If needed, scroll through the page to prompt lazy-loaded content to appear, return to the desired state, and capture again.
Capture area screenshot is unavailable or fails	DevTools is undocked.	Dock DevTools to the browser window, reopen the Command Menu, and choose the area capture command again.
The screenshot is the wrong size or shows the wrong portion	The selected command captures a different scope than intended, or Device Mode has a different viewport configured.	Use full-size for the whole document, viewport capture for the visible view, or area capture for a crop. Check the Device Mode viewport before capturing.
The image includes a menu, dialog, or overlay you did not want	The page was captured in a state with that element open.	Close it before taking the screenshot, then capture again.
The page looks blank or incomplete	The page may still be loading, or its content did not render in the current tab.	Verify the page is visibly complete in Chrome before invoking capture. Wait for loading or resolve the page issue, then try again.

7. Browser setup versus a screenshot API

DevTools is a practical choice when you are already signed in interactively and need an image of that browser state. For repeatable captures of public pages or automated workflows, a screenshot API can avoid maintaining browser capture code. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. Its clean-shot workflow accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Only clean shots are billed: bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients.

Or skip the browser setup

For a page that the API can access, make one GET request. See the ScreenshotNeo API documentation for setup and options.

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

Replace YOUR_API_KEY with your key and change the target URL. These examples capture a URL the service can access; they do not transfer your Chrome login session. For authenticated pages, use the documented request options only when you are authorized to access the target and can provide the required authentication safely.

ScreenshotNeo removes cookie banners, 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. See ScreenshotNeo and the documentation, then sign up for 1,000 free screenshots a month with no card.

8. Performance, reliability, and cost

• Capture only what you need: viewport and area captures avoid producing an unnecessarily long image when you only need a visible section. Full-page images are useful for long documents but can be large and harder to review.
• Wait for the intended state: pages with delayed or lazy-loaded content may not be complete as soon as the initial view appears. Check the rendered page before capture and inspect the saved output afterward.
• Keep the session in its normal browser context: the method relies on the page already being open in your signed-in tab. It does not create a separate authenticated session.
• Review output before sending: a successful capture can still contain sensitive content or an unintended overlay.
• DevTools cost: these capture commands are built into Chrome DevTools; the workflow described here does not require a separate screenshot service.
• API cost, if you choose it: ScreenshotNeo offers 1,000 shots per month free 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.

FAQ

Does DevTools capture the page while I am logged in?

Yes. Capture the page displayed in the tab where you signed in and navigated to the target. If the site has signed you out, the screenshot will show the state currently rendered in that tab.

Do I need to export cookies to take the screenshot?

No. Sign in normally and use the same tab. Exporting or copying session cookies is unnecessary for this workflow.

Can I capture just one element?

The steps above cover a full document, viewport, or selected rectangular area. For automated API capture of a specific CSS-selected element, ScreenshotNeo supports element capture; consult its documentation for the relevant option.

Does Network screenshot capture make a screenshot of the page I am looking at?

It records page-loading frames when you reload with the feature enabled. For a one-off image of the current page, use Device Mode or the Command Menu capture commands.