Now, browse any website on Google Chrome and search for any web page that you want to capture a full screenshot. After installation, click on the Full Page Screen Capture button on the Chrome toolbar and it will start to take scrolling screenshot automatically on your Chrome browser. Here’s how to get a full-page screenshot in Chrome without installing any extension: The Chrome Shortcut for Taking a Full-Page Screenshot. Google Chrome incorporates a great screenshot tool, however, it’s somewhat covered up. You’ll initially enter two arrangements of console tabs. To find it, follow these steps: On Mac. Alt + Command + I.
- Chrome Screenshot Full Page Console Windows 10
- Full Page Screenshot
- Chrome Screenshot Full Page Console Commands
- Full Page Screenshot Chrome Extension
A returning subject on this blog, how to automate device screenshots with Node.js and Chrome. This post will cover installation and running the script on either Mac OS or Linux. If you’re brave, you can use Windows too ?
Update: A Chrome update actually broke the code for full page screenshots using forceViewport, the code samples have been updated to support the change.
Full error message:
Automating Screenshots of your Website
There’s a ton of services for this out there, but if you have some kind of edge case or simply just need a better way of taking screenshots, please read on.
The example code makes use of async and await, so please be on Node.js 7.8+.
As always I recommend NVM for installing different versions of Node.
Getting / Starting Chrome Headless
Assuming you want to run this on a linux server, after installing Google Chrome via apt/pacman/yum, run:
google-chrome --version
Cocktail 10 4 4 – general maintenance and optimization utility.Chrome Screenshot Full Page Console Windows 10
![Page Page](https://i.ytimg.com/vi/r_6_9eFPhxI/maxresdefault.jpg)
Expected output:
Google Chrome 59.0.3071.115
(or higher)Install Guides for:
Full Page Screenshot
- Ubuntu
apt-get install google-chrome-stable
- ArchLinux
To start the headless chrome browser, simply run:
Chrome Screenshot Full Page Console Commands
Note: Your terminal will now be occupied by running that chrome browser in headless mode, if you want to detach it and keep it in the background, append a
&
to the command like so:Another tip, if you want to know the process ID of your chrome headless browser, append
&; echo $!
, which will output the process ID of what you just started:so you can use that to kill the process, if you want to restart it or just be rid of it.
Taking Screenshots with Headless Chrome
Let’s get to the code! If you copy the below and save it as
screenshot.js
and in the same directory runCopy & paste ready code ?
You should be good to go.
You can specify the URL by running:
To make a full page screenshot (careful, this behaviour is still buggy), simply include
--fullPage true
in your command.Credits for code to:
- this post on medium which didn’t work for me on Mac OS X and also I needed the delay much higher than none
- some other snippets I can’t seem to dig up any more
Automated Mobile Testing
In order to test which devices have which real and which CSS resolution you can have a look at mydevice.io which has a reasonable collection of smartphones and their resolutions and their device pixel ratios.
If you want to check out your own screen/phone you can use the device pixel ratio test. Chronosync 4 8 1 rel2 download free.
To use headless chrome and node to test how your page looks on mobile simply change the following defaults (or change them via command line arguments):
and
Voilá!
Summary
Thank you very much for reading, actually the post I once upon a time about phantom.js was pretty successful, so I felt a bit nostalgic writing this post.
Why do you want to take screenshots? What’s your use case? I’m super curious!
Further Reading
Full Page Screenshot Chrome Extension
Check out the Google Blog Post
Thank you for reading! If you have any comments, additions or questions, please leave them in the form below! You can also tweet them at me
If you want to read more like this, follow me on feedly or other rss readers