Using smart screenshot tools and iOS Emulators

Nice-to-Know Niche Knowledge for the Savvy Web Developer.

1️⃣ - Taking accurate screenshots of web pages.

*using Google Chrome

To take clean screenshots in the right viewport, open Google Chrome Developer Tools, press CMD+SHIFT+P or.STRG+SHIFT+P and start typing the word screenshot. Then you have the option to take a screenshot of the viewport, the whole page, a specific area, or of a DOM node.
The screenshot will end up as a PNG in your download folder.


2️⃣ - Clear caches when developing.

*in Google Chrome

Tired of hitting SHIFT every time you reload a page you are developing on so that no caches are left? No problem!
Just go to the settings and check Network > Disable cache (while DevTools is open).


3️⃣ - Test websites on iOS - without iPad or iPhone.

*in macOS

To quickly test websites on an iDevice, all you need is a Mac with XCode. To make the simulator available for you, open XCode once and click on 'XCode' > 'Open Developer Tool' > 'Simulator' in the top menu. This will open the Simulator app, where you can open any iOS device under Hardware>Device. DevTools will run via Desktop Safari, just like on connected devices. Best of all, URLs hosted locally on your Mac work too!


Click here for Webworker Quick Tips Vol. 2.