ScreenshotNeo

BlogHow-to

How to Take a Screenshot of a Website with Chromium in Hindi

Capture a page area, an entire element, or a mobile view in Chromium. Follow the DevTools steps or automate a viewport capture with headless Chrome.

By the ScreenshotNeo team4 October 20267 min read

You can take a website screenshot in Chromium with DevTools or the headless command line. For a selected region, open DevTools’ Command Menu, search for screenshot, choose Capture area screenshot, and drag over the page. To capture an element, select it in Elements and run Capture node screenshot. For a repeatable viewport capture, run headless Chrome with --screenshot. The steps below are in English; the Chromium commands themselves are the same regardless of the browser’s display language.

Official references: DevTools Command Menu, Capture node screenshot, Device Mode, and Headless Chrome command line.

1. Capture a selected area of the page

  1. Open the website in Chromium and wait until the section you need is visible.
  2. Open DevTools: press F12 or Ctrl+Shift+I on Windows/Linux, or Cmd+Option+I on Mac. If the DevTools window is detached, dock it back into the browser window; area capture does not work while DevTools is undocked.
  3. Focus DevTools and open the Command Menu with Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac.
  4. Type screenshot, then choose Capture area screenshot.
  5. Drag over the desired region of the page. Chromium creates an image of the selected area, which you can save from the resulting image or download prompt.

This method is suited to a visible portion of the current page. It is not the right command for a complete long page or a specific DOM element that extends below the viewport.

2. Capture a whole HTML element

  1. Open DevTools and select the Elements panel.
  2. Use the element picker or inspect the DOM tree to select the card, chart, table, or other element.
  3. Open the Command Menu with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
  4. Search for Capture node screenshot and run it.

The node command captures the selected element, and it can include content below the visible viewport. If the result is not what you expect, verify that you selected the element itself rather than a wrapper or a child node. The command is documented in the Chrome DevTools release notes.

3. Capture a mobile-sized or full-page view

To capture a responsive layout, first set the viewport in Device Mode:

  1. Open DevTools and toggle the device toolbar using the device icon or Ctrl+Shift+M (Windows/Linux) / Cmd+Shift+M (Mac).
  2. Choose a listed device, or enter a custom width and height. The page may need a moment to reflow at the new size.
  3. Open the Device Mode menu and choose Capture screenshot for the visible viewport, or Capture full size screenshot for the whole page.
  4. If you want a device frame included, enable Show device frame before capturing. A frame changes the image contents; leave it off for a plain page screenshot.

Device Mode simulates a viewport and related device settings; it does not reproduce every property of a physical phone. Use it to inspect responsive appearance, and check on a real device when behavior depends on hardware or browser-specific features. See the Device Mode guide.

4. Automate a viewport screenshot with headless Chromium

The basic --screenshot flag saves a screenshot named screenshot.png in the current working directory. Add --window-size=WIDTH,HEIGHT to choose the viewport dimensions:

chrome --headless --screenshot --window-size=1280,900 https://example.com/

To use a specific executable path or choose your output directory, replace chrome with the path to your Chromium binary and run the command from the directory where you want screenshot.png saved. For example, on a system where the executable is named chromium:

chromium --headless --screenshot --window-size=1280,900 https://example.com/

This takes a viewport screenshot; the basic flag does not automatically make a full-page image. The official headless reference documents --screenshot, --window-size, and --timeout. For example, to cap the wait before capture at five seconds:

chrome --headless --screenshot --window-size=1280,900 --timeout=5000 https://example.com/

The timeout is a maximum wait, not a guarantee that every image, animation, or client-side request has finished. If the page needs longer to settle, increase it. For precise page-state control, use browser automation that can wait for a selector or other condition; the command-line flag alone does not provide those controls.

5. Which Chromium screenshot method should you use?

Need Method Scope
A quick crop of what you can see Command Menu → Capture area screenshot Dragged region; DevTools must be docked
A card, chart, or other DOM element Select in Elements → Capture node screenshot Selected node, including content beyond the viewport where applicable
A mobile layout Device Mode → Capture screenshot Configured device viewport; optional frame
A whole long page in DevTools Device Mode menu → Capture full size screenshot Full page
A repeatable command-line capture Headless Chrome --screenshot Viewport by default; add a window size

6. Reliability, timing, and file considerations

  • Wait for the page to settle. A screenshot records a moment in time. Client-rendered content, lazy-loaded images, fonts, consent prompts, and animations may not be ready when capture begins.
  • Set the viewport deliberately. Responsive breakpoints can change layout, text wrapping, and images. Keep viewport dimensions consistent when comparing screenshots.
  • Know what the height means. In the headless command, --window-size controls the viewport. A tall viewport is not the same as a reliable full-page capture; use DevTools’ full-size capture when that is the goal.
  • Expect site differences. Login state, location, cookies, network conditions, and server-side personalization can change what Chromium renders.
  • Plan output handling. The command-line screenshot uses the current working directory and the default filename screenshot.png; move or rename it after capture if your workflow needs another name.

7. Troubleshooting

Symptom Likely cause Fix
Capture area screenshot is missing The Command Menu search does not match, or DevTools is undocked. Search for screenshot and dock DevTools into the browser window. The official command-menu guide notes that area capture does not work while undocked.
The area selection cannot be drawn DevTools may have focus or be detached from the page window. Dock DevTools, activate Capture area screenshot again, then drag directly on the page.
The wrong element is captured A parent wrapper or child was selected in Elements. Inspect the DOM tree and select the node whose rendered box matches the target.
The headless command says chrome: command not found The binary is not on the shell’s PATH or has a different name. Use the installed browser’s executable name or provide its full path.
No screenshot appears in the expected folder The command writes to the current working directory. Check the directory from which the command ran, then move the generated screenshot.png.
The screenshot is blank or partly loaded The page had not rendered useful content before capture, or navigation failed. Confirm the URL opens normally, allow more wait time with --timeout, and try after the page is visibly settled.
The image shows only the top viewport --screenshot captures the viewport by default. Use DevTools’ Capture full size screenshot or the selected-node workflow when appropriate.
The mobile screenshot differs from a phone Device Mode is an emulation and may not match physical hardware behavior. Check the viewport, device settings, and frame option; verify hardware-dependent behavior on a real device.

8. Or skip the browser setup

ScreenshotNeo provides a website screenshot API: one GET request returns an image or PDF. See the ScreenshotNeo API documentation. This cURL example saves a WebP screenshot of the example page:

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

Equivalent Python and Node.js requests:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.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 accepts cookie and consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; those steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and the response includes page-verdict and billing headers. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. Visit ScreenshotNeo or sign up free for 1,000 screenshots a month, with no card required.

9. Frequently asked questions

Does the page need to be open on screen for a headless capture?

No. Headless Chrome runs without the visible browser interface; provide the URL in the command.

Can I save the screenshot as JPEG with the basic headless flag?

The documented basic command saves screenshot.png. The command-line examples here do not specify an output format option.

Can I capture a page behind a login?

A plain command-line URL capture does not configure an authenticated browser session. Use a browser session with the required login state for pages that require authentication.

Is Chromium the same workflow as Chrome here?

The DevTools and headless steps described use Chromium’s Chrome DevTools interfaces and command-line behavior. The exact executable name and available command options can depend on the installed build.