An example introduction to the Headless Chrome development tool library

Headless Chrome refers to running Google Chrome in headless mode. The essence is to run Google without Google! It translates all the features of modern web platforms provided by the Chromium and Blink rendering engines into the command line.

what's it for?

Headless Browser is a great tool for automated testing and servers that do not require a visual user interface. For example, you want to run some tests on a web page, create a PDF from the web page, or just check how the browser submits the URL.

Warning: Chrome 59 on Mac and Linux can run in Headless mode. Windows support will be provided soon.

Run Headless Chrome from the command line

Chrome installation (requires a ladder)

• Download address

• Comparison of several versions

• Chromium is not Chrome, but the content of Chrome basically comes from Chromium. This is an open source version, updated hourly

• Canary is the experimental version, which translates to canary. Canary is very sensitive to poisonous gases such as gas. If the concentration is slightly higher, it will stop chirping or even die. Canary is a crude method for detecting gas and other poisonous gases. This scene is in It can also be seen in Huang Bo's operation in "The Secret of the Dragon". Haha, I'm going too far, this is the daily build version.

• Dev is the development version, weekly build version

• Beta is the test version, monthly build version

• Stable is a stable version, updated from time to time, usually about once a month

• Update frequencyChromium > Chrome Canary > Chrome Dev > Chrome Beta > Chrome Stable

• Chrome Dev, Chrome Beta and Chrome Stable can only have one of them at the same time

• Chromium, Chrome Canary and any of the remaining ones can coexist

• The Windows platform download may only be an online installation program. To download the offline version, add parameters to the URL of the download page standalone=1

Command line quick configuration (Mac environment)

Add <pre class="brush:php;toolbar:false">alias chrome=&quot;/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome&quot; alias chrome-canary=&quot;/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary&quot;</pre> to

~/.bashrc

Reopen the terminal, we can directly passchromeOpen the stable version of Chrome, chrome-canaryOpen the experimental version of Chrome.

Start Chrome from the command line

• Refer to the official instructions, Headless mode requires Chrome Version >= 59

• Use Chrome to open Baidu homepage (with interface), you can see the browser opening

chrome

• Start in interface-less mode Chrome opens the Baidu homepage (no interface), but does not open the browser interface, but there is an icon on the taskbar

chrome --headless

• Start Chrome in headless mode and convert the page to PDF. You can see the output of output.pdf

chrome --headless --print-to-pdf

• Start Chrome in headless mode and take a screenshot. You can see the output of screenshot.png

chrome --headless --screenshot --window-size=414,736

• Launch Chrome using headless mode and open Interactive environment

chrome --headless --repl

• Start Chrome in headless mode and turn on the debugging server

chrome --headless --remote-debugging-port=9222

• ##Reference Chrome command line parameter list

Command line operation Headless Chrome

• Make sure Headless Chrome is started and debugging Server is enabled

chrome --headless --remote-debugging-port=9222

##Installation
• chrome-remote-interface

npm install chrome-remote-interface -g

View the command description, various related operations can be performed here
"

$ chrome-remote-interface

Usage: chrome-remote-interface [options] [command]

Commands:

  inspect [options] [b4bef09dd2761803871f1d83e55d08b2] inspect a target (defaults to the first available target)
  list                   list all the available targets/tabs
  new [9bb6a7d109b3f2bf35f7e2e9bd87f98a]            create a new target/tab
  activate 53384f78b45ee9f1e3082cf378b9c5b4          activate a target/tab by id
  close 53384f78b45ee9f1e3082cf378b9c5b4             close a target/tab by id
  version                show the browser version
  protocol [options]     show the currently available protocol descriptor

Options:

  -h, --help         output usage information
  -t, --host f7e6dec31ab1a0471d06c55afaca8d77  HTTP frontend host
  -p, --port 298c9bd6ad6e8c821dc63aa0473d6209  HTTP frontend port
  -s, --secure       HTTPS/WSS frontend

"

Open a new page

chrome-remote-interface new

View the page you just opened

chrome-remote-interface inspect

View the URL of the current page
##>>> Runtime.evaluate({expression:' location.href'})

Run Headless Chrome programmatically

Start Chrome debugging server directly by calling the command line through code

The above command line execution method can be directly called through system call. This method will have some work to do in a cross-platform situation.

Google出品的Lighthouse 这个网页质量检查工具，有一个组件专门做这事，考虑了各种平台的兼容性问题，源码参考lighthouse-chromelauncher，这个组件现在已经单独独立出来，作为一个单独的NPM组件chrome-launcher,可以直接使用这个在Node平台下调用，其他平台的也可以此为参考。

const chromeLauncher = require('chrome-launcher');//启用无界面模式并开启远程调试,不同引用版本和方式，调用方式可能有些区别//chromeLauncher.run({chromeLauncher.launch({// port: 9222,chromeFlags: ['--headless']}).then((chrome) => {// 拿到一个调试客户端实例console.log(chrome)chrome.kill();});

通过客户端的封装组件进行浏览器交互

实现了ChromeDevTools协议的工具库有很多，chrome-remote-interface是NodeJS的实现。

Chrome调试Server开启的是WebSocket交互的相关实现，要用编程的方式实现还需要封装一些WebSocket命令发送、结果接收等这一系列操作，这些chrome-remote-interface已经帮我们做了，更多实例可以参考chrome-remote-interface的wiki。

const chromeLauncher = require('chrome-launcher');const chromeRemoteInterface = require('chrome-remote-interface')//启用无界面模式并开启远程调试,不同引用版本和方式，调用方式可能有些区别//chromeLauncher.run({chromeLauncher.launch({port: 9222,chromeFlags: ['--headless']}).then((launcher) => {chromeRemoteInterface.Version({host:'localhost',port:9222}).then(versionInfo => {console.log(versionInfo)});chromeRemoteInterface({host:'localhost',port:9222}).then((chrome) => {//这里调用ChromeDevToolsProtocol定义的接口const {Network,Page} = chrome;Network.requestWillBeSent((params) => {let {request}  = params;let {url} = request;console.log(url)});Promise.all([Network.enable(),Page.enable()
        ]).then(() => {Page.navigate({url:'https://www.baidu.com'})});setTimeout(() => {launcher.kill()},5000);})});

The above is the detailed content of An example introduction to the Headless Chrome development tool library. For more information, please follow other related articles on the PHP Chinese website!