Chrome Headless 模式

前言 Headless Browser

Headless Browser的定義是無界面的瀏覽器。多用於測試web應用，自動截圖，測試js代碼，爬蟲抓取信息等等。

簡而言之，現代瀏覽器是給用戶使用，而Headless Browser則更多的是給程序使用。

Chrome的Headless模式出來之前，其他現代瀏覽器也都是沒有提供Headless模式。現有的Headless Browser都是基於現有的幾個瀏覽器內核來封裝開發的。

比較常見的幾個Headless Browser：

• PhantomJS - QtWebKit內核

• SlimerJS - Gecko內核

• TrifleJS - IE內核

因為畢竟不是真實的用戶瀏覽器環境，使用起來還是有不少的詬病。此前一段時間研究使用過PhantomJS，功能雖然夠用，不過對比在真實的瀏覽器裡面訪問的數據信息還是有所差別。

最近Chrome Headless模式的發布（雖然還是開發版本里的，不過終究會變成穩定版本的功能），使得許多使用Headless Browser的紛紛替換成了Chrome，優勢不言自明。

Headless Chrome

Chrome 59 beta版本開始支持Headless mode，過不久就會是穩定版本的功能。Chrome Platform Status中有詳細的每個版本新增的功能。

Headless模式可以讓Chrome無界面的運行，相當於開了一個無界面的瀏覽器的進程，然後可以通過介面或者Chrome開發者調試工具來操作Chrome，包括載入頁面、獲取元數據（DOM信息等）等等，所有Chrome提供的功能都可以使用。

啟動Headless模式

chrome --headless --remote-debugging-port=9222 https://chromium.org --disable-gpu

--disable-gpu ，Linux伺服器一般沒有GPU，所以不禁用可能會產生一些錯誤。

DevTools - Chrome的開發者調試工具

用正常的Chrome瀏覽器打開http://localhost:9222, 就能看到用開發者調試工具可以操作你正在打開的頁面。

Node.js API

需要使用到一個Node.js的庫，chrome-remote-interface

使用該庫獲取載入一個頁面然後獲取它的DOM信息：

const CDP = require(chrome-remote-interface);CDP((client) => { // Extract used DevTools domains. const {Page, Runtime} = client; // Enable events on domains we are interested in. Promise.all([ Page.enable() ]).then(() => { return Page.navigate({url: Example Domain}); }); // Evaluate outerHTML after page has loaded. Page.loadEventFired(() => { Runtime.evaluate({expression: document.body.outerHTML}).then((result) => { console.log(result.result.value); client.close(); }); });}).on(error, (err) => { console.error(Cannot connect to browser:, err);});

該庫實現的各個模塊詳細的文檔：Chrome debugger protocol viewer

Chrome debugging protocol

chrome-remote-interface其實是Chrome debugging protocol的實現，它才是基石。我在另外一篇文章里有簡單介紹它的使用。 Chrome之遠程調試協議（Remote debugging protocol）

Chrome Developer Tools是用HTML，Javascript，CSS編寫的chrome開發者工具，然而Remote debugging protocol就是它用來與瀏覽器頁面(pages)交互和調試的協議通道。採用websocket來與頁面建立通信通道，由發送給頁面的commands和它所產生的events組成。chrome的開發者工具是這個協議主要的使用者，第三方開發者也可以調用這個協議來與頁面交互調試。

總結

Chrome Headless模式的出現讓PhantomJS的作者停止維護了他的項目，可以預見不久所有主流的瀏覽器也會提供Headless模式，從而現有的Headless Browser的項目都會慢慢停止維護。

各大瀏覽器提供Headless模式可以讓程序運行的環境更貼近用戶訪問的真實環境，得出的數據也會更加準確可靠。

參考文章

• Chrome之遠程調試協議（Remote debugging protocol

• Headless Chromium

• Chrome Debugging Protocol

• chrome-remote-interface

• Chrome debugger protocol viewer

推薦閱讀：