Capture website screenshot with Chrome Developer Tools

0
3357
Capture website screenshot with Chrome Developer Tools
Capture website screenshot with Chrome Developer Tools

Sometimes, you might want to capture screenshot for a website but don’t have any capture tool, here Chrome comes to the rescue.

To capture a screenshot, you will need to open Developer Tools first by using combination Ctrl + Shift + I, and you can open quick command launcher by pressing combination Ctrl + Shift + P. It will show a popup dialog, where you can type keyword of related command to find. In this case, you might want to take screenshot of website, so you can just type screenshot, it will show all options for screenshot commands.

Chrome Quick Command Launcher
Chrome Quick Command Launcher

Depending on what kind of screenshot you want to take, just press Enter on the appropriate option, it will take a screenshot and save to your computer.

Chrome only takes screenshot of everything visible on browser, anything is not loaded won’t show up on screenshot. The only solution I found is, when access to any website, make sure you scroll to make it show content fully, then take screenshot. It is so common nowadays that web uses AJAX to load content lazily, so by scrolling to whole website, it will guarantee that content will be visible for Chrome to screenshot.