Skip to content

Instantly share code, notes, and snippets.

@algal

algal/websitescreenshot.md

Last active December 26, 2023 11:07
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"
@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