Headless Chrome開發工具庫的實例介紹

Headless Chrome指在headless模式下執行Google瀏覽器。本質就是不用谷歌運行谷歌！它將由Chromium和Blink渲染引擎提供的所有現代網頁平台的特徵轉化成了命令列。

它有什麼用？

Headless瀏覽器是一種很好的工具，用於自動化測試和不需要視覺化使用者介面的伺服器。例如，你想要在一個網頁上執行一些測試，從網頁建立一個PDF，或是只是檢查瀏覽器怎麼遞交URL。

警告：在Mac和Linux上的Chrome 59可以運行Headless模式。支援Windows的會很快提供。

命令列運行Headless Chrome

Chrome 安裝（需要帶梯子）

• 下載位址

##幾個版本的比較
Chromium 不是Chrome，但Chrome的內容基本上來自Chromium，這個是開源的版本，小時等級的更新
#Canary 是試驗版，翻譯過來就是金絲雀，金絲雀對瓦斯等毒氣很敏感，濃度稍高就會停止鳴叫甚至掛掉，金絲雀是瓦斯等毒氣檢測的土辦法，這個場景在《尋龍訣》中黃渤的操作中也能看到。哈哈 扯遠了，這個是daily build 版本。
Dev 是開發版，weekly build版本

• #Beta 是測試版，monthly build版本

#Stable 是穩定版，不定期更新，通常大約一個月一次

更新頻率Chromium > Chrome Canary > Chrome Dev > Chrome Beta > Chrome Stable

Chrome Dev、Chrome Beta 和Chrome Stable三者只能同時出現一個

Chromium 、Chrome Canary 和剩下的任一個可共存

• Windows平台下載下來的可能只是一個在線安裝的程序，下載離線版在下載頁面的URL裡面加參數

  standalone=1
命令列快速設定（Mac環境）

在~/.bashrc 中加入

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"

重新開啟終端，我們就可以直接透過
• chrome

  打開穩定版的Chrome，

  chrome-canary
打開試驗版的Chrome了。

命令列啟動Chrome

參考官方說明, Headless模式需要Chrome Version >= 59

• ##使用Chrome打開百度首頁(帶介面)，能看到瀏覽器的開啟

#chrome

##使用無介面模式啟動Chrome開啟百度首頁(無介面)，但不到瀏覽器介面打開，但工作列會有圖示

• chrome --headless

#使用無介面模式啟動Chrome並將頁面轉換為PDF，可以看到

output.pdf

的輸出

chrome --headless --print-to-pdf

使用無介面模式啟動Chrome並截圖，可以看到
• screenshot.png

  的輸出

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

• 使用無介面模式啟動Chrome並打開互動環境

chrome --headless --repl

#使用無介面模式啟動Chrome，並開啟偵錯Server

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

• 參考Chrome命令列參數清單

命令列操作Headless Chrome

• 已啟動Headless Chrome,並啟用了調試Server

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

#安裝

chrome-remote-interface

#npm install chrome-remote-interface -g

#檢視指令說明，這裡可以進行各種相關動作

## #####"###$ 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

###"#############開啟新頁面########### ####chrome-remote-interface new ###############查看剛開啟的頁面###############chrome-remote-interface inspect###############查看目前頁面的URL###############>>> Runtime.evaluate({expression:' location.href'})##################可程式設計方式運行Headless Chrome#######直接透過程式碼呼叫命令列啟動Chrome 偵錯Server##### ##可以透過系統呼叫的方式直接呼叫上面的命令列執行方式。這種方式在跨平台的情況下會有一些工作要做。 ###

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);})});

以上是Headless Chrome開發工具庫的實例介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！