Headless Chrome — Getting Started
What is Headless Chrome?
Headless Chrome is basically Chrome without Chrome. To make it clear it’s Chrome browser without the UI and only command line functionalities can be accessed. This headless mode enables developers to get their hands dirty developing automation and other utility tools around chrome. It brings us all the modern web platform features and the rendering engine onto a simple command prompt.
Utilizing the Headless Chrome we can do various automation tasks as well as create sophisticated tools for testing the websites. In this article, we will specifically cover the various ways in which we can use the Headless Chrome Browser.
Remember — Headless mode is available only Mac and Linux in Chrome 59 at this point in time. Soon Windows support will be available in Chrome 60.
In order to start Chrome, Headless one needs to find the chrome installation so that you can point it out from the command line. Now let’s get stated.
Starting Headless Chrome Browser from the Command Line
- Open the Terminal and find the path to Chrome 59 or Chrome Canary
- Use the following command to jump start the Headless Chrome
- chrome — headless — disable-gpu — remote-debugging-port=9222 https://www.google.com
- The above command can be broken up into three sections and let me explain the same
- — headless — “This triggers chrome in headless mode”
- — disable-gup — “This is a temporary flag which will eventually go off. For time being its required”
- — remote-debuggin-port=9222 — “Used for the debugging port”
- URL — “This particular URL points to the URL to be opened by the Headless Chrome”
- This should typically open up a browser that points to https://www.google.com
- You can see the entire process below in the GIF file that is shown.
Starting Headless Chrome
List of Command Line Features Provided by Headless Chrome
There are various ways in which you can program the headless Chrome but let’s get started with the simplest of them. Let’s invoke few commands in order to get the thing working from the console itself.
DOM Printing using — dump-dom
The — dump-dom option gives you a utility through which you can dump the entire DOM onto your console. It is equivalent to the document.body.innerHTML that we use in order to spit out the entire DOM element.
So let’s try out the command and see how it works
chrome --headless --disable-gpu --dump-dom https://www.google.com/
Have a look at this image so as to understand the process.
Chrome Headless Dump DOM
Creating PDF from the Website
Now generating PDF files from the backend was a pain at a point of time but imagine now you can invoke this through the terminal and get the best stuff. Let’s see the commands that come into play and how do you get the PDF file.
chrome --headless --disable-gpu --print-to-pdf https://www.thewebjuice.com/
Headless Chrome Print PDF
This PDF file will get generated in the current working directory.
Let’s Take a Screenshot
Now in the next step, we will try to take a screenshot of the website. This is pretty interesting since the Chrome Browser goes headless and gets you the screenshot of the entire site. Now there is a small surprise. Imagine you need the screenshot to be of a specific size then in that case chrome provides an option through which you can do this. Lets see these in the command line below:-
chrome --headless --disable-gpu --screenshot http://www.thewebjuice.com/
# Letterhead Size.
chrome --headless --disable-gpu --screenshot --window-size=1280,1696 http://www.thewebjuice.com/
# Size referring to nexus viewport
chrome --headless --disable-gpu --screenshot --window-size=412,732 http://www.thewebjuice.com/
Here you can see the options — screenshot which will help you in taking the screenshot and then comes the — window-size which refers to the width and height of the window which you can use in order to take the screen shots. Let’s see a demonstration in the GIF below.
Headless Chrome Taking Screenshot
This might have exposed you to the plethora of opportunity using Chrome and do various tasks of generating PDF’s, generating images and moreover imagine if you can program it out you can have automated suites that can be built around Headless Chrome. We will cover topics related to scripting int the next few posts.
Originally published at The Web Juice.