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

  1. Open the Terminal and find the path to Chrome 59 or Chrome Canary
  2. Use the following command to jump start the Headless Chrome
  3. The above command can be broken up into three sections and let me explain the same
    1. –headless  – “This triggers chrome in headless mode”
    2. –disable-gup – “This is a temporary flag which will eventually go off. For time being its required”
    3. –remote-debuggin-port=9222 – “Used for the debugging port”
    4. URL – “This particular URL points to the URL to be opened by the Headless Chrome”
  4. This should typically open up a browser that points to https://www.google.com
  5. You can see the entire process below in the GIF file that is shown.
Starting Headless Chrome

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

Have a look at this image so as to understand the process.

Chrome Headless Dump DOM

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.

Headless Chrome Print PDF

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:-

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

Headless Chrome Taking Screenshot

Conclusion

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.


Also published on Medium.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This