Taking website screenshots, in Chrome or Safari, including simulating iPhones

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"

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

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.

👍

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

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.

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?

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

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.

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