I found this helpful feature on Google Chrome when I was having a problem taking a full page screenshot on Tablet and Mobile view of a page where I made changes on. I use Nimbus screenshot chrome extension to take Desktop screenshots and it works great but when on Developer tools > Device Mode and viewing it using chosen device, the extension is not properly capturing the full size screenshot that I want so I searched Google’s extensions library and found them all to be lacking… only to find out later that I actually don’t need any extension to get the screenshot I want. It’s all in Google Chrome Developer tools already. I have been using Developer tools for so long and have not really browsed on other features so it came to me as a surprise. I was so happy to try it and it worked even though not consistently (some screenshots, some would have blank top part so I would refresh the page and re-capture it). I suggest checking the saved image to ensure all are in place, if something doesn’t look right, just re-capture it or refresh the page before capturing another screenshot.
Anyway, let me show you how to do it:
Open the Developer Tools.
You can do this by clicking the More icon (3 dots in the top right of the browser), then clicking More tools > Developer tools.
Or you can use the function key F12 or the shortcut Ctrl + Shift + I on Windows/Linux/Chrome OS or Alt + Command + I on a Mac.
From this, you can take a screenshot of the page in 2 ways:
1) Using the Command Menu
- Press Control+Shift+P on Windows/Linux/Chrome OS or Command+Shift+P on a Mac.
- Type “screenshot” in the Command Menu and you will see the “Capture full size screenshot” option in the menu.
- Select Capture full size screenshot then Chrome will automatically save a full page screenshot in PNG format to your default downloads folder.
2) Using Device Mode
- Turn on Device Mode. You can also use the shortcut Control+Shift+M on Windows/Linux/Chrome OS or Command+Shift+M on a Mac.
- Choose your device preferences (device type, dimensions and zoom level) in the Device Toolbar.
- Click on the More Options icon (3 dots in the Device Toolbar)
- Select Capture full size screenshot, then Chrome will automatically save a full page screenshot in PNG format to your default downloads folder.
Did you try it? Let me know how it goes for you. 😊
0 Comments