Android の Chrome をリモートデバッグ

メモ

1. [デバイス] 開発者オプションを有効にする
2. [PC] Chrome で chrome://inspect にアクセスし、Discover USB devices にチェックを入れる
3. デバイスとPCをUSBで接続する
4. デバッグしたいタグの inspect をタップする

https://developer.chrome.com/devtools/docs/remote-debugging

vulcanize を使ってみた

vulcanize は Polymer 用の最適化ツールで、Web Components を1つのファイルにできる。
「Concatenate a set of Web Components into one file」

Polymer/vulcanize : github

GTUG Girls のサイトに使ってみた。

$ vulcanize -o index.html index_raw.html

Web Components が index.html に結合され、platform.js と polymer.js だけ残る。

• vulcanize 前 : http://www.gtuggirls.jp/index_raw.html
• vulcanize 後 : http://www.gtuggirls.jp/index.html

Google の PageSpeed Insights にかけてみた

• vulcanize 前 : モバイル 81/100、パソコン 89/100
• vulcanize 後 : モバイル 74/100、パソコン 86/100

「HTML を縮小する」が増えたため点数は下がった。

だいたい3000行くらい（index_raw.html は125行）になったので、-s オプションを付けてコメントと空行を削ったら1000行くらいになった。

$ vulcanize -s -o index.html index_raw.html


Request数

• vulcanize 前 : 68 requests
• vulcanize 後 : 42 requests

実際ブラウザで表示されるまでの時間が短くなっているような気もする。