resource

Create full-page screenshot with online tools, your browser, or utility comes with your OS

Whether for a presentation, bug report, education, etc, here is how to make a screenshot using available tools for free

2sfgOcy

This post will shows you how to capture screenshot using the following methods:

  1. Capture with site screenshot
  2. Capture screenshot on Chrome (or Brave, Firefox, ect)
  3. Capture screenshot on Safari
  4. Snipping Tool on Windows
  5. Keyboard shortcut on MacOS

Let’s get started

1. Capture with Site Screenshot

Our recently published tool allow you to flexibly generate and download webpage screenshot. To create a website screenshot:

  1. Visit https://inverr.com/tools/screenshot
  2. Enter the website target, then click Capture to preview.
  3. To download, click the download icon (bottom right of the preview photo)

There are a few options available, including:

  • Viewport: Simulate device’s size for screenshot
  • Delay: Useful when the target webpage contains animation, lazy loading images that need complete before screenshot
  • Full-page option: either screenshot the entire page, or just as height as specified in the Viewport

2. How to screenshot a website on Chrome?

Note: This also applied for browsers with Chromium, including recent Firefox, Brave, etc

To capture a website on Chrome Browser:

  1. Open Developer Tools by using shortcut Option + Command (⌘) + j (on MacOS) or Shift + Ctrl + j (on Windows/Linux).
  2. Then open Run command by shortcut Option + Shift + P (on MacOS) or Ctrl + Shift + P (on Windows). Or click on the three vertical dots icon on the top right, then choose Run command
  3. Then from the command search bar, enter screenshot. Select a screenshot mode (as below), then choose a location to save the screenshot photo

There are 4 available screenshot modes, including:

  • Capture area screenshot: allow you to select an area, then make a screenshot
  • Capture full size screenshot: generate a screenshot of the entire page (top to bottom)
  • Capture node screenshot: allow you to select and make screenshot of an element (i.e header, body)
  • Capture screenshot: generate a screenshot of whatever visible in the current window

3. How to screenshot a website on Safari?

The quickest way to capture a website on Safari browser on MacOS:

  1. Open Developer Tools by keyboard shortcut Option + Command (⌘) + J. Then navigate to Elements tab
  2. Right click on an element, or the whole html element, select Capture Screenshot. Then choose a location to save the screenshot photo

Besides using the above methods, there are also tools come with the OS itself.

4. Snipping Tool on Windows

You can use Snipping Tool (scissor icon) to capture screenshot of anything within your screen view. To open Snipping Tool:

  • For Windows 10, and 7: select ⊞ Start, then typesnipping tool` in the search bar
  • For Windows 8: Swipe from the right edge of the screen, and select Search. Then type snipping tool

5. Screenshot using keyboard shortcut on MacOS

Built-in with the OS, you can easily create a screenshot with the following keyboard shortcuts:

  1. Shift + Command + 5: Create a screenshot of an app’s window
  2. Shift + Command + 4: Select an area, then create a screenshot
  3. Shift + Command + 3: Create screenshot from the current screen window

That’s it. Now you know how to capture a website screenshot using our Site Screenshot Generator, and modern browsers like Chrome, Brave, Firefox, Safari.

Want a website? Start with Inverr

Try without an account →