• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Firefox Developer Tools
  1. MDN
  2. Firefox Developer Tools
  3. Taking screenshots

Taking screenshots

In This Article
  1. Taking a screenshot of the page
  2. Taking a screenshot of an element
  3. Copying screenshots to the clipboard

You can use the Developer Tools to take a screenshot of the entire page, or of a single element in the page.

Taking a screenshot of the page

Use the screenshot icon: to take a full-page screenshot of the current page.

By default, the screenshot icon is not enabled. To enable it:

  • visit the Settings page
  • find the section labeled "Available Toolbox Buttons"
  • check the box labeled "Take a screenshot of the entire page".

You'll now see the icon in the toolbar:

Click the icon to take a screenshot of the current page. The screenshot is saved to your browser's "Downloads" directory:

Taking a screenshot of an element

To take a screenshot of a single element in the page, activate the context menu on that element in the Inspector's HTML pane, and select "Screenshot Node". The screenshot is saved to the browser's "Downloads" directory:

Copying screenshots to the clipboard

From Firefox 53, you can also copy the screenshot to the clipboard. Just check the box in Settings labeled "Screenshot to clipboard":

Now, whenever you take a screenshot, the screenshot is also copied to the clipboard.

Document Tags and Contributors

Tags: 
  • Tools
 Contributors to this page: wbamberg
 Last updated by: wbamberg, Feb 23, 2017, 11:53:10 AM
  1. Core Tools
    1. Page Inspector
    2. Web Console
    3. JavaScript Debugger
    4. Network Monitor
    5. Performance
    6. Responsive Design Mode
    7. Tips
  2. More Tools
    1. Memory
    2. Storage Inspector
    3. DOM Property Viewer
    4. Developer Toolbar
    5. Eyedropper
    6. Screenshot
    7. Scratchpad
    8. Style Editor
    9. Shader Editor
    10. Web Audio Editor
  3. Connecting the devtools
    1. about:debugging
    2. Connecting to Firefox for Android
    3. Connecting to iframes
    4. Connecting to other browsers
  4. Debugging the browser
    1. Browser Console
    2. Browser Toolbox
  5. Extending the devtools
    1. Adding a panel to the toolbox
    2. Example devtools add-ons
    3. Remote Debugging Protocol
    4. Stream Transport
    5. Source Editor
    6. The Debugger Interface
    7. Web Console custom output
  6. Settings
  7. Release notes