Skip to content

Instantly share code, notes, and snippets.

@algal

algal/websitescreenshot.md

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.
Download ZIP
Taking website screenshots, in Chrome or Safari, including simulating iPhones
Raw
websitescreenshot.md

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"
@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