Mac で Chrome のヘッドレスモードを試してみた

Chrome がヘッドレスモードに対応したということなので試してみました。コマンドラインからchromeが扱え、URLのテキスト出力、pdf出力とpng出力が出来ます。

環境

macOS Sierra version 10.12.4
Chrome Canary

手順

次のページの手順をなぞってみました。環境に書いた通り macOS で試しています。Windows はまだ非サポートのようです。

Getting Started with Headless Chrome | Web | Google Developers

Chrome Canary を取得する

まず一番最初で躓きました。コマンドラインで動かすとエラーが出ました。

pink-poodle:~ nnasaki$ chrome --headless --dump-dom https://www.chromestatus.com/
[0503/211508.668380:ERROR:resource_bundle.cc(767)] Failed to load /Applications/Google Chrome.app/Contents/Versions/58.0.3029.96/Google Chrome Framework.framework/Versions/A/resources.pak
Some features may not be available.
Segmentation fault: 11

先のドキュメントを見返すとちゃんと書いてありました。version 59 以上対応です。普段使っている stable はまだ 58 でした。

f:id:nnasaki:20170503220232p:plain

Chrome Canary は 2017/5/3 現在、version 60 なので次のURLからダウンロードします。

www.google.co.jp

こんな感じでインストール出来ました。

f:id:nnasaki:20170504000506p:plain

Alias を設定する

一々、 "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ 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"

DOM を標準出力に出力する

次のコマンドを実行します。

pink-poodle:~ nnasaki$ chrome-canary --headless --dump-dom https://www.chromestatus.com/

結果は次の通りです

<body class="loading">

<!--<div id="site-banner">
  <a href="https://www.youtube.com/watch?v=Rd0plknSPYU" target="_blank">
  <iron-icon icon="chromestatus:ondemand-video"></iron-icon> How we built it</a>
</div>-->

<app-drawer-layout fullbleed="">
  <app-drawer swipe-open="" position="left" persistent="" opened="" style="transition-duration: 0ms;">
    <div class="drawer-content-wrapper">
      
<h3>Chrome versions</h3>


<chromedash-metadata impl-statuses="[{&quot;va
（ 以下省略）

pdf に出力する

次のコマンドを実行します。なにか Warning は出ましたが、 output.pdf は出来ていました。

pink-poodle:~ nnasaki$ chrome-canary --headless --print-to-pdf https://www.chromestatus.com/
[0503/212309.511536:INFO:headless_shell.cc(436)] Written to file output.pdf.
[0503/212309.528822:WARNING:spdy_session.cc(2910)] Received HEADERS for invalid stream 11
[0503/212309.532442:WARNING:ipc_message_attachment_set.cc(49)] MessageAttachmentSet destroyed with unconsumed attachments: 0/1

出来た PDF はこんな感じで、PDFビューワで表示出来ました。ですが、ページをロードしきる前に取得してしまっています。

f:id:nnasaki:20170503221342p:plain

スクリーンショットをpngで出力する

次のコマンドを実行します。pdf 同様 Warning が出ますが、 screenshot.png は出来ました。

pink-poodle:~ nnasaki$ chrome-canary --headless --screenshot https://www.chromestatus.com/
[0503/212340.847874:INFO:headless_shell.cc(436)] Written to file screenshot.png.
[0503/212340.858981:WARNING:ipc_message_attachment_set.cc(49)] MessageAttachmentSet destroyed with unconsumed attachments: 0/1

pdf と比べて解像度がちょっと違うようです。

f:id:nnasaki:20170503221417p:plain

オプションを変えてスクリーンショットを取る

--disable-gpu を付けると、うまくとれた感じです。

pink-poodle:~ nnasaki$ chrome-canary --headless --disable-gpu  --screenshot https://www.chromestatus.com/
[0504/015437.958909:ERROR:service_manager_connection_impl.cc(285)] Can't create service network. No handler found.
[0504/015439.432167:INFO:headless_shell.cc(437)] Written to file screenshot.png.
p

f:id:nnasaki:20170504015808p:plain

プログラミングしてみる

サンプルにあった Lighthouse's ChromeLauncher と chrome-remote-interface を組み合わせて、スクリーンショットを取ってみました。Chrome のプロセス自動終了がうまくいきませんでしたが、スクリーンショットはとれるようになりました。なぜか --headless を有効にすると1ピクセルの画面が取得されてしまうので、オプションを外してブラウザは画面に表示されるようになりました。

ソースを載せておきます。

スクリプトをコマンドライン風で扱うのは次のサイトが参考になりそうです。スクロールもさせて取れるようなオプションもあるのですが、うまく行きませんでした。

medium.com