DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Firefox Screenshots: Built-in Tool, DevTools, Headless CLI, and Playwright

#firefox #webdev #tools #productivity

Firefox has a built-in screenshot tool that's often overlooked. Combined with DevTools, you have flexible options for capturing pages exactly as needed.

Firefox's Built-in Screenshot Tool

Firefox ships with a screenshot feature — no extension needed.

Keyboard shortcut: Not set by default, but you can access it via the toolbar or context menu.

From context menu: Right-click anywhere on a page → "Take Screenshot"

From the toolbar: If not visible, right-click the toolbar → Customize Toolbar → find "Screenshot" and drag it to your toolbar.

Screenshot Modes

When you activate the screenshot tool, you get options:

  • Save visible: Captures what's currently on screen
  • Save full page: Captures the entire page, including below the fold (scrolls the full page)
  • Select region: Click and drag to capture a specific area

Screenshots are downloaded automatically or copied to clipboard (option in the screenshot UI).

DevTools Screenshot

For more controlled screenshots, use DevTools:

Capture viewport:
Ctrl+Shift+I → Open DevTools → In the … menu or Console, run:

// From browser console toolbar
Enter fullscreen mode Exit fullscreen mode

Actually, the fastest method is the DevTools toolbar button. In DevTools Inspector:

  1. Click the "Take a screenshot" button (camera icon) in the DevTools toolbar
  2. Or: DevTools … menu → "Take a Full Page Screenshot"

This captures the full page, including content below the fold, at the page's natural pixel density.

Responsive Design Mode Screenshots

For device-specific screenshots:

  1. Ctrl+Shift+M → Responsive Design Mode
  2. Set device dimensions (iPhone, iPad, custom)
  3. Click the camera icon in the Responsive Design toolbar
  4. Downloads a screenshot at the device's simulated resolution

Useful for:

  • App Store screenshots showing mobile view
  • Documentation showing mobile layout
  • Bug reports with specific device dimensions

To set a device pixel ratio (DPR) for high-density screenshots:
Responsive mode → DPR setting → 2 or 3 for Retina-equivalent resolution.

Headless Screenshot via Command Line

Firefox in headless mode can take screenshots programmatically:

firefox --headless --screenshot output.png https://example.com
Enter fullscreen mode Exit fullscreen mode

Captures the visible viewport. For full page:

firefox --headless --screenshot --window-size=1920,10000 output.png https://example.com
Enter fullscreen mode Exit fullscreen mode

Useful for:

  • Automated visual regression testing
  • Capturing screenshots in CI/CD pipelines
  • Server-side screenshot generation (no GUI needed)

Combine with --private-window to avoid any profile state affecting the screenshot.

Playwright Screenshots in Firefox

For programmatic, reliable screenshots:

const { firefox } = require('@playwright/test');

(async () => {
  const browser = await firefox.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  // Full page
  await page.screenshot({ path: 'fullpage.png', fullPage: true });

  // Specific element
  const element = await page.$('.my-component');
  await element.screenshot({ path: 'component.png' });

  // Custom viewport
  await page.setViewportSize({ width: 375, height: 812 });
  await page.screenshot({ path: 'mobile.png' });

  await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

Playwright's Firefox support is mature and suitable for production screenshot workflows.

DevTools Console Method

From the browser console:

// Copy current tab screenshot to clipboard (requires about:config permission)
document.documentElement.requestFullscreen().then(() => {
  // Alternative: use the Screenshot API
});
Enter fullscreen mode Exit fullscreen mode

The proper way via DevTools console:

// Get a blob URL of the visible area
HTMLCanvasElement.prototype.toBlob
Enter fullscreen mode Exit fullscreen mode

Actually, the easiest Console method is the DevTools' built-in:

  • Command Palette (Ctrl+Shift+P in DevTools) → type "screenshot"
  • "Capture screenshot" (visible area)
  • "Capture full page screenshot" (entire page)

This is the fastest path to a screenshot without leaving the keyboard.

CSS for Print/Screenshot Optimization

When creating documentation screenshots, CSS print styles can help:

@media print {
  .sidebar, .nav, .footer { display: none; }
  .content { max-width: 100%; }
}
Enter fullscreen mode Exit fullscreen mode

Print styles apply when using File → Print → Save as PDF, and when using window.print() via JS. For clean documentation screenshots, temporarily add print-preview styles.

When to Use Each Method

Use case Method
Quick page capture Built-in screenshot tool (context menu)
Full page capture DevTools full page screenshot
Mobile sizes Responsive Design Mode → camera icon
Automation/CI Headless Firefox or Playwright
Specific elements Playwright element screenshot
Exact viewport DevTools command palette "Capture screenshot"

The built-in tool covers 90% of use cases. Playwright handles the programmatic 10%.

Top comments (0)