命令列執行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 
```
參考

命令列操作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] [<target>] inspect a target (defaults to the first available target)
    list                   list all the available targets/tabs
    new [<url>]            create a new target/tab
    activate <id>          activate a target/tab by id
    close <id>             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 <host>  HTTP frontend host
    -p, --port <port>  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出品的這個網頁質量檢查工具，有一個元件專門做這事，考慮了各種平臺的相容性問題，原始碼參考，這個元件現在已經單獨獨立出來，作為一個單獨的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已經幫我們做了，更多例項可以參考。

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

        setTimeout(() => {
            launcher.kill()
        },5000);

    })
});

Web自動化之Headless Chrome開發工具庫