Skip to content

Instantly share code, notes, and snippets.

@algal
Last active August 11, 2024 18:37
Show Gist options
  • Save algal/972c43b533cade4332faf4ec4458fd93 to your computer and use it in GitHub Desktop.
Save algal/972c43b533cade4332faf4ec4458fd93 to your computer and use it in GitHub Desktop.
Taking website screenshots, in Chrome or Safari, including simulating iPhones

Taking website screenshots

These are instructions for taking screenshots of an entire webpage, not just the part of the webpage visible in the browser.

Website Screenshots in Safari

This requires Safari 11.3, which comes on macOS 10.3.4.

  1. Open the website in Safari
  2. If needed, go Safari > Preferences > Advanced > Show Develop Menu in Menu Bar
  3. Go Develop > Enter Responsive Design Mode
  4. Click on the icons to choose your device and orientation.
  5. Go Develop > Show Web Inspector
  6. Right-click on the on purple "html" element showing up in the element tree, and select Capture Screenshot

Website Screenshots in Chrome

  1. Open the website in Chrome
  2. In the menu bar, go to View > Developer > Developer Tools
  3. Click the meatball menu in the developer console and switch "Dock Side" to "Undock in separate window" to separate the browser window from the developer tools window.
  4. In the browser window, adjust the viewport size as desired. Be aware: Chrome cannot accurately simulate rendering on an iOS device. For that, you need to use Safari
  5. In the developer tools window, do CMD-SHIFT-P to open the "command window"
  6. Type "Capture full size screenshot"
@awgeorge
Copy link

awgeorge commented Sep 6, 2018

Website Screenshots in Firefox

  1. Open the website in Firefox
  2. In the menu bar, go to Tools > Web Developer > Inspector
  3. Click the settings cog near the far right of the inspector toolbar
  4. Scroll down to Available Toolbox Actions and select Take a fullpage screenshot
  5. Now you'll have a camera icon on the toolbar
  6. Press the camera icon to take a full page screenshot

@digitall-it
Copy link

Safari: If you don't need to check the page for responsiveness, you can just right click on the page, select to Inspect it, then follow point 6.

@rdanilin
Copy link

👍

@joeinnes
Copy link

In Safari, it seems as though only the viewport is captured in the screenshot

@digitall-it
Copy link

In Safari, it seems as though only the viewport is captured in the screenshot

No, it takes a screenshot of the entire page. If the page contains lazy loaded elements, or parts that appear only when in the visible area, make sure to scroll to bottom before capturing the screenshot. Attached an example of the output.

Istantanea 2020-09-22 alle 12 15 23

@joeinnes
Copy link

Huh, seems there may be a bug.

On this page, it worked, but on the page I originally tested on, https://picnicss.com, it does not, even after scrolling to the bottom of the page (although I don't see any lazy loading or anything on that site).

Could you check from your side if it works correctly on that site?

Screenshot

@digitall-it
Copy link

yeah, unfortunately it doesn't seem to work everywhere.

@RA80533
Copy link

RA80533 commented Apr 11, 2021

It's entirely dependent on the CSS. If there's any CSS that interacts with the viewport or overflow, etc., the screenshot ends up wonky.

@RA80533
Copy link

RA80533 commented Apr 11, 2021

This method also works quite well for taking screenshots of specific elements.

Screen Shot 2021-04-11 at 15 59 25

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment