Skip to content
Forgetful Notes

Consistently Take a Website Screenshot

Taking a precise screenshot of an HTML element in your browser’s Developer Tools can be incredibly useful for web development and design. Follow these steps to capture a node screenshot with a custom Device Pixel Ratio (DPR) and resolution.

Overview

Section titled “Overview”
  1. Press Ctrl + Shift + I or F12 to open the browser developer tools.
  2. Press Ctrl + Shift + M to toggle the device toolbar.
  3. Click the dots on top right and select “Add device pixel ratio” or DPR.
  4. Set DPR to 2.0 if not done yet.
  5. Set resolution (e.g. 512x512).
  6. Select the HTML element you’d like to capture within the “elements panel”.
  7. Press Ctrl + Shift + P to open the run command interface.
  8. Type “node” to show the “Capture node screenshot” and press Enter.
  9. Enjoy your screenshot.

Step-by-Step Tutorial

Section titled “Step-by-Step Tutorial”

  1. Open Developer Tools

    Section titled “Open Developer Tools”

    Press Ctrl + Shift + I or F12 to open the browser developer tools. This can look different depending on what browser you use.

    Here’s what it looks like in Microsoft Edge:

    dev-tools-edge

  2. Toggle Device Toolbar

    Section titled “Toggle Device Toolbar”

    Press Ctrl + Shift + M to toggle the Device Toolbar, allowing you to simulate different devices.

    device-toolbar device-toolbar2

  3. Add Device Pixel Ratio (DPR)

    Section titled “Add Device Pixel Ratio (DPR)”

    Click the three vertical dots in the top right corner of the Developer Tools pane. From the dropdown menu, select “Add device pixel ratio” (or DPR).

  4. Set Device Pixel Ratio (DPR)

    Section titled “Set Device Pixel Ratio (DPR)”

    In the Device Toolbar, set the DPR to 2.0 if it is not already set. This ensures the screenshot captures with the desired pixel density.

  5. Set Resolution

    Section titled “Set Resolution”

    In the Device Toolbar, set the desired resolution. This configures the viewport size for your screenshot.

  6. Select HTML Element

    Section titled “Select HTML Element”

    In the Elements panel, navigate to and select the HTML element you want to capture. This highlights the specific node for the screenshot. Usually the <body> element will work, but it depends on the site you are screenshotting.

  7. Open Command Menu

    Section titled “Open Command Menu”

    Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac) to open the Command Menu in Developer Tools.

  8. Capture Node Screenshot

    Section titled “Capture Node Screenshot”

    In the Command Menu, type “node” to filter commands and select “Capture node screenshot” from the list. Press Enter.

  9. Enjoy Your Screenshot

    Section titled “Enjoy Your Screenshot”

    The screenshot of the selected HTML element with the specified DPR and resolution is now saved. You can find it in your default download location.