How to Do Website Screenshots on Google Chrome, Mozilla Firefox, and Microsoft Edge

by

When you’re researching online, you may want to capture a screenshot of a website for various reasons, such as for documentation, sharing with colleagues, or even as part of a blog post.

In this guide, we’ll explain how to do website screenshots using three popular browsers: Google Chrome, Mozilla Firefox, and Microsoft Edge.

Google Chrome

  1. Open the Google Chrome browser and navigate to the website you want to capture.
  2. Press Ctrl + Shift + I (or Cmd + Option + I on a Mac) to open the Developer Tools panel.
  3. Press Ctrl + Shift + P (or Cmd + Shift + P on a Mac) to open the Command Menu.
  4. Type “screenshot” in the search box and select the screenshot type you want to take from the options:
    1. Capture area screenshot,
    2. Capture full size screenshot, or
    3. Capture node screenshot.
  5. The screenshot will be saved to your default downloads folder as a PNG file.

Mozilla Firefox

  1. Open the Mozilla Firefox browser and navigate to the website you want to capture.
  2. On your keyboard, press and hold Ctrl + Shift + S
  3. Choose between
    1. Save full page
    2. Save visible
  4. Follow the on screen prompts, to select the area to capture
  5. Click on the ‘Download’ button
  6. The screenshot will be saved to your default downloads folder as a PNG file.

Microsoft Edge

  1. Open the Microsoft Edge browser and navigate to the website you want to capture.
  2. On your keyboard, press and hold Ctrl + Shift + S
  3. Choose between
    1. Capture area
    2. Capture full page
  4. Follow the on screen prompts, to select the area to capture
  5. The picture can be modified before saving – for example use the ‘Draw’ tool to highlight information and the ‘Erase’ tool to remove information
  7. The screenshot will be saved to your default downloads folder as a PNG file or copied to your clipboard, depending on your selection.