Home > Article > Web Front-end > 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.
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
Add <pre class="brush:php;toolbar:false">alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"</pre>
to
Reopen the terminal, we can directly passchrome
Open the stable version of Chrome, chrome-canary
Open the experimental version of Chrome.
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
chrome --headless --remote-debugging-port=9222
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
Run Headless Chrome programmatically
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!