Headless Chrome入門

04-21

原文首發：看雪論壇 [翻譯]Headless Chrome入門

摘要

-------------------------------------------------—————————————————————————————————————————

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

它有什麼用？

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

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

開始Headless（命令行界面）

——————————————————————————————————————————————————————

開始headless模式的最簡單方式就是用命令行打開谷歌瀏覽器。如果你已經安裝了Chrome 59以上版本，用--headless命令打開：

注意：--disable-gpu命令是暫時需要，最後會消失。

chrome命令必須指向你的谷歌瀏覽器的安裝路徑。不同的系統有不同的路徑。因為我在Mac上安裝，我給每個已經安裝的谷歌瀏覽器版本都起了別名（aliase）。

命令行界面

---------------------------------------------------------------------------------------------------------------------------------------

有時候，你也許不需要在Headless Chrome中運行編程腳本。下面是一些有用的執行常見任務的命令行指令。

注意：運行這些命令時你同時需要--disable-gpu命令。

列印DOM

--dump-dom命令列印document.body.innerHTML到標準輸出：

創建PDF

--print-to-pdf命令從網頁創建一個PDF：

截圖

獲得一個頁面的截圖，使用--screenshot命令：

使用--screenshot命令會在當前工作目錄中保存截圖為screenshot.png。如果你想給整個頁面截圖，會有點複雜。有一個很好的博客可以解決你的問題，作者是David Schnurr ，題目為《把headless Chrome作為一個自動截圖工具》。

不用瀏覽器用戶界面調試谷歌瀏覽器？

——————————————————————————————————————————————————————

當你用--remote-debugging-port=9222命令打開谷歌瀏覽器時，DevTools協議會被激活。該協議用於與谷歌瀏覽器內核進行交互和驅動headless瀏覽器實例。它也可以像Sublime、VS Code和Node一樣用來遠程調試一個程序。

因為沒有瀏覽器用戶界面用來看網頁，你需要在另一個瀏覽器中連接到http://localhost:9222來確保一切正常。你會看到一列可檢查的網頁，可以點擊它們並看到使用了哪種Headless渲染。

用DevTools遠程調試用戶界面

從這開始，你可以像往常一樣用熟悉的DevTools來檢查、調試和調整網頁了。如果你要用Headless編程模式，這個頁面也會是一個有力的調試工具，讓所有原始DevTools協議命令穿過電線，與瀏覽器進行交流。

使用編程模式（Node）

——————————————————————————————————————————————————————

打開谷歌瀏覽器

在之前的部分，我們使用--headless --remote-debugging-port=9222命令手動打開谷歌。然而，為了全自動測試，你可能需要在應用程序中批量打開谷歌瀏覽器。

一種方式是用child_process：

但是當你需要一個可以跨平台運行的方案時，事情就變得複雜了。請看Chrome的硬編碼。

使用Lighthouse的ChromeLauncher模塊

——————————————————————————————————————————————————————

Lighthouse是一種用來測試Web應用的神奇工具。人們沒有意識到的一件事是它配置了一些很有用的工作在谷歌瀏覽器上的模塊。其中一個就是ChromeLauncher。ChromeLauncher可以找到谷歌瀏覽器的安裝位置，建立一個調試實例，啟動瀏覽器，在程序完成後殺掉實例。最棒的是由於Node它可以跨平台工作！

注意：Lighthouse團隊正在為 ChromeLauncher 探索一個有改進的API的獨立的包。如果你有任何反饋請告訴我們。

默認情況下，ChromeLauncher 會啟動金絲雀（Canary）版Chrome（如果它安裝了），但是你可以手動選擇默認使用哪個版本。為了使用它，首先要從npm上安裝Lighthouse：

例子——用ChromeLauncher啟動Headless模式

運行這個腳本不會做很多事，但是你可以在任務管理器中看到，谷歌瀏覽器啟動了一個載入about:blank的實例。記住，不會有任何瀏覽器用戶界面。我們是headless的。

為了控制瀏覽器，我們需要DevTools協議！

檢索網頁信息

——————————————————————————————————————————————————————

chrome-remote-interface是一個很好的Node包，提供了一些基於DevTools協議的高級API。你可以用它來編排Headless Chrome，導航到網頁，並獲取這些網頁的信息。

警告：DevTools協議可以做很多有趣的事情，但是剛開始使用會有些艱難。我建議先花一點時間瀏覽《DevTools Protocol API Viewer》，然後閱讀《chrome-remote-interface API》來學習它是如何封裝原始協議的。

讓我們安裝這個包：

例子

例子——列印用戶代理

得到如下形式的結果：HeadlessChrome/60.0.3082.0

例子——檢查網站是否有Web應用清單

例子——用DOM API提取網頁<title>

更多資源

——————————————————————————————————————————————————————

這有一些有用的入門資源：

文章

《DevTools Protocol》——如何使用該協議的參考資料

《DevTools Protocol Viewer》——API參考文檔

工具

chrome-remote-interface——基於 DevTools協議的node模塊

Lighthouse——測試web應用的質量的自動化工具

樣例

《The Headless Web》——作者Paul Kinlan發布的使用api.ai.和Headless的博客

常見問題解答

——————————————————————————————————————————————————————

1. 我需要--disable-gpu命令嗎？

是的，現在需要。--disable-gpu是用來處理一些bug時暫時需要的命令。在之後的谷歌瀏覽器版本中就不需要了。從 https://crbug.com/546953#c152和https://crbug.com/695212中了解更多。

2. 所以我仍然需要Xvfb？

不需要。Headless Chrome不需要用窗口，所以不需要像Xvfb一樣的顯示伺服器。沒有它你就可以進行自動化測試。

3. Xvfb是什麼？Xvfb是一個在類Unix系統中運行在內存的顯示伺服器，讓你可以沒有連接物理顯示設備就能運行圖形用戶界面程序（比如谷歌瀏覽器）。許多人用Xvfb運行早期版本的谷歌瀏覽器來做「headless」測試。

4. 我是怎樣創建Docker容器來運行Headless Chrome的？

使用lighthouse-ci。它有一個以Ubuntu作為基礎鏡像的Dockerfile實例，還可以在一個App Engine Flexible容器中安裝+運行 Lighthouse。

5. 我可以把這個和Selenium / WebDriver / ChromeDriver一起用么？

現在，Selenium為谷歌瀏覽器開放了一個完整實例。換句話說，這是一個全自動方案但不是完全headless模式。不管怎樣，Selenium會在將來可以使用--headless。

如果你想試試，我建議參照文章《 Running Selenium with Headless Chrome》來設置你想要的。

注意：你在使用 ChromeDriver時或許會遇到bug。截至本次寫作時間，最新版本（2.29）只支持 Chrome 58。Headless Chrome 要求Chrome 59及更高版本。

6. 這個與PhantomJS有什麼關係？

Headless Chrome和PhantomJS是相似的工具。它們都可以用來在headless環境下進行自動化測試。兩者的主要不同是Phantom用一個更老版本的WebKit作為渲染引擎，而Headless Chrome使用最新版本的Blink作為渲染引擎。

現在，Phantom也提供了一個比 DevTools協議更高級的API。

7. 我在哪兒提交bug？

Headless Chrome的bug，請提交到crbug.com。

DevTools協議的bug，請提交到 github.com/ChromeDevTools/devtools-protocol。

作者： Eric?Bidelman

原文鏈接：https://developers.google.com/web/updates/2017/04/headless-chrome

本文由看雪翻譯小組 Green奇編譯