Screenshot a Single DOM Node in Firefox Inspector
This article explains how to capture a pixel-perfect screenshot of an individual HTML element using the built-in developer tools in the Firefox web browser. By utilizing the Inspector tool, you can bypass the need for external screen capture software and manual cropping, allowing you to quickly save an exact image of any specific DOM node on a webpage with just a few clicks.
1. Open the Firefox Inspector
Navigate to the webpage containing the element you want to capture.
Right-click directly on the target element on the page and select
Inspect from the context menu. Alternatively, you can
press Ctrl + Shift + I on Windows/Linux or
Cmd + Option + I on macOS to open the Developer Tools, and
then use the element picker icon in the top-left corner of the panel to
select your element.
2. Select the Target DOM Node
Once the Developer Tools panel opens, the Inspector tab will be active and the HTML tree will be visible. The specific DOM node you clicked on will be highlighted in the markup. If you need to capture a parent container or a child element instead, simply click on the desired HTML tag within the Inspector tree to highlight it. Hovering over the nodes in the list will highlight their boundaries on the webpage, confirming you have the correct element selected.
3. Capture the Node
Right-click directly on the highlighted HTML tag inside the Inspector panel to open the developer context menu. Scroll down the menu and click on Screenshot Node.
4. Access Your Screenshot
Firefox will immediately capture the selected DOM node and automatically save it as a PNG file in your system's default Downloads folder. You can also view it by clicking the Downloads icon in the Firefox toolbar.
Key Benefits of This Method
- Pixel-Perfect Accuracy: The capture strictly adheres to the bounding box of the DOM node, eliminating the risk of human error during manual cropping.
- High Resolution: The screenshot respects the device pixel ratio (DPR), meaning if you are on a high-DPI or Retina display, the saved image will retain that high resolution.
- Transparency Support: If the selected DOM node has
a transparent background or rounded corners (via
border-radius) without a solid parent background immediately attached to it, Firefox preserves the alpha transparency in the final PNG file. - Full Element Capture: Even if the DOM node is larger than your current viewport and requires scrolling to see in its entirety, Firefox will capture the entire element from top to bottom.