Headless Chrome 初体验

Headless Chrome： https://developers.google.com/web/updates/2017/04/headless-chrome

Headless Chrome 是 Chrome 浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有 Chrome 支持的特性运行你的程序。是一个非常强大的工具，可以用于自动化测试，导出PDF等等。
是不是很惊艳！

一、使用条件

Chrome59版本之后

二、初体验（CLI）

当本地安装了Chrome（59）版本后，可直接使用命令

官方命令：

chrome \
  --headless \                   # Runs Chrome in headless mode.
  --disable-gpu \                # Temporarily needed if running on Windows.
  --remote-debugging-port=9222 \
  https://www.chromestatus.com   # URL to open. Defaults to about:blank.

我用mac试了下，不行！查了下问题，chrome命令必须指向安装路径，配置alias

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

iterm中使用chrome，发现新开一个chrome框架，ok，命令配置成功。
再次运行上面的例子，为了照顾没有科学上网的同学，我把地址改为了github地址，运行结果如下：

➜  Applications chrome --headless --disable-gpu --remote-debugging-port=9222 https://www.github.com
[0526/220633.101323:ERROR:gpu_process_transport_factory.cc(1007)] Lost UI shared context.

DevTools listening on ws://127.0.0.1:9222/devtools/browser/e6f55573-96e0-4b26-9731-f97dc4d11a14

这个报错无关紧要。这时我们已经启动一个127.0.0.1:9222的服务，我们浏览器打开看一下。

http://localhost:9222

能看到如下页面，即代表运行成功

chrome.jpg

三、简单命令

1. --dump-dom 输出 document.body.innerHTML 内容

chrome --headless --disable-gpu --dump-dom https://www.github.com/

2. --print-to-pdf 打印成PDF

chrome --headless --disable-gpu --print-to-pdf https://www.github.com/

3. --screenshot 还能设置不同window大小下的截图，也就是想Chrome Dev一样切换Mobile/Ipad/PC环境

chrome --headless --disable-gpu --screenshot https://www.github.com/

# Size of a standard letterhead.
chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.github.com/

# Nexus 5x
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.github.com/

4. --repl 可以创造一个执行js的环境

chrome --headless --disable-gpu --repl --crash-dumps-dir=./tmp https://www.github.com/

测试如下：

➜  Applications chrome --headless --disable-gpu --repl --crash-dumps-dir=./tmp https://www.github.com/
[0526/222016.136062:ERROR:gpu_process_transport_factory.cc(1007)] Lost UI shared context.
[0526/222022.277836:INFO:headless_shell.cc(419)] Type a Javascript expression to evaluate or "quit" to exit.
>>> windoe.location
{"exceptionDetails":{"columnNumber":0,"exception":{"className":"ReferenceError","description":"ReferenceError: windoe is not defined\n    at \u003Canonymous>:1:1","objectId":"{\"injectedScriptId\":2,\"id\":2}","subtype":"error","type":"object"},"exceptionId":1,"lineNumber":0,"scriptId":"20","text":"Uncaught"},"result":{"className":"ReferenceError","description":"ReferenceError: windoe is not defined\n    at \u003Canonymous>:1:1","objectId":"{\"injectedScriptId\":2,\"id\":1}","subtype":"error","type":"object"}}
>>> window.location.href
{"result":{"type":"string","value":"https://github.com/"}}
>>>

4、推荐的开源库

puppeteer: https://github.com/GoogleChrome/puppeteer
chrome-launcher: https://github.com/GoogleChrome/chrome-launcher
chrome-remote-interface: https://github.com/cyrus-and/chrome-remote-interface
selenium-webdriver: https://github.com/SeleniumHQ/selenium
chromedriver: https://github.com/giggio/node-chromedriver
webdriverio: https://github.com/webdriverio/webdriverio
下面的章节，我会研究这几个开源库的使用