Headless Chrome

Headless Chrome 是 chrome 59 版本時加入的新功能,
可以讓瀏覽器在背景執行, (例如 virtualbox 也有 headless mode, vagrant 常使用)
在網頁自動化測試或是爬蟲等場景都很有用.

start

chrome 啟動時加上 --headless 就可以跑 headless mode (不會有視窗跑出來)
但是如果要跟瀏覽器互動, 一般會加上 --remote-debugging-port=9222
藉此透過 websocket 以及 cdp 來操作

例如啟動 headless 瀏覽器並連上 https://www.instagram.com/

1
chromium --headless --disable-gpu --remote-debugging-port=9222 https://www.instagram.com

此時可以打開 http://localhost:9222/ 就可以看到 devtools app 畫面.
(此時看到的 devtools 是遠端的不是本地的)

另外有很多 flags 可以用來作一次行的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 印出 HTML 內容, 可以嘗試用 curl 抓不到, 因為 instagram 內容是 Javascript 跑出來的
chromium --headless --disable-gpu --dump-dom https://www.instagram.com

# 輸出列印成 pdf 檔, output.pdf
chromium --headless --disable-gpu --print-to-pdf https://www.instagram.com

# 輸出截圖, screenshot.png
chromium --headless --disable-gpu --screenshot https://www.instagram.com

# 指定視窗大小並截圖
chromium --headless --disable-gpu --screenshot --window-size=1280,800 https://www.instagram.com

# 進入 JS console (REPL)
chromium --headless --disable-gpu --repl https://www.instagram.com

上面例子可以發現截圖顯示 Error, 和真正打開瀏覽器 (拿掉 headless) 結果不同,
很多網站可能為了防止爬蟲, 會作一些偵測, 讓這種 headless 瀏覽器失效,
很常見的例子是偵測 UserAgent, 例如加上 --user-agent 後就可以截圖到登入畫面(但是登入表單還在載入狀態)

1
2
3
chromium --headless --disable-gpu --screenshot --window-size=1280,800 \
--user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36" \
https://www.instagram.com

可以嘗試加上 --virtual-time-budget=10000 設定網頁載入 timeout 為 10s,
就可以看到完整的登入畫面了.

那這時候如果要繼續登入, 互動, 抓相簿等等,
就要用以下工具了

Reference