Service Worker 開発するときのデバッグ方法


Service Worker Hackathon で教えてもらったのでまとめておく。
2015/04/05 時点での記事。

# 前提

* [Chrome Canary](https://www.google.co.jp/chrome/browser/canary.html) を入れておく(今のところ、これが無いと話にならない)
* localhost か https な環境を使う
	* でも、[Dropbox public link な環境はダメ](http://qiita.com/tmtysk/items/3283dcf8cb483cc9186f)

# Service Worker Inspector を有効にする

Chrome Canary で以下を設定。なお、43.0.2350.0 canary (64-bit) で確認。そのうち設定箇所や方法が変わったり、stable でも使えるようになるかもしれない。

1. ```chrome://flags``` にアクセスし、```デベロッパーツールのテストを有効にする #enable-devtools-experiments``` の項目を有効にする
	![スクリーンショット 2015-04-05 13.29.03.png](https://qiita-image-store.s3.amazonaws.com/0/1329/d720c2f2-f895-1013-a135-8f02dae0b526.png "スクリーンショット 2015-04-05 13.29.03.png")
2. Chrome 再起動
3. デベロッパーツールを開き ```Settings - Experiments``` のメニューで **Shiftキーを6回押す** と現れる ```Service workers in Resources panel``` にチェック
![スクリーンショット 2015-04-05 13.31.28.png](https://qiita-image-store.s3.amazonaws.com/0/1329/bf8fea68-81be-1f34-6ed3-ac3cccae9f4f.png "スクリーンショット 2015-04-05 13.31.28.png")
4. **デベロッパーツールを一度閉じて、再度開く**

# デバッグあれこれ

これも、随時開発が進んでいるようなので、やり方はちょいちょい変わるかもしれない。

## 登録済みの Service Worker を一覧する

* ```chrome://serviceworker-internals``` にアクセス
* 個別に Unregister もできる
![Kobito.qW4oId.png](https://qiita-image-store.s3.amazonaws.com/0/1329/922a44b4-ab28-8aa4-1109-e146b8ada723.png "Kobito.qW4oId.png")


## 個別の Service Worker のステータスやエラー状況を見る

* デベロッパーツールの ```Resources - Service Workers``` を開く
* Scope の横にあるゴミ箱アイコンを使って Unregister できる(sw.js を更新したときなど、わりと頻繁に使う) 

![スクリーンショット 2015-04-05 13.40.24.png](https://qiita-image-store.s3.amazonaws.com/0/1329/2afe1a9e-b3ee-bd10-dc80-287f2cb5ff83.png "スクリーンショット 2015-04-05 13.40.24.png")

## Service Worker Cache 状況を確認/削除する

* 上記 ```Resources - Service Workers``` で見える sw.js のところにある ```inspect``` をクリック
* ```Service Worker Cache``` をクリック
	* この inspector は自動更新されないので、「あれー、キャッシュ更新されてない？」なときは、右クリックメニューで ```Refresh Caches```
![スクリーンショット 2015-04-05 13.43.50.png](https://qiita-image-store.s3.amazonaws.com/0/1329/6264670c-92f2-a88f-8693-c78c90d9223a.png "スクリーンショット 2015-04-05 13.43.50.png")
	* この画面からバージョン単位でのキャッシュ削除もできる。右クリックメニューで Delete

## Android 実機デバッグ

* Chrome beta を入れておく
* USBデバッグを有効にする
* ```chrome://inspect/#devices``` にアクセスし、 ```Discover USB Devices``` にチェック
* ```Port forwarding``` で、Android 側でアクセスする localhost ポート番号と、PC 側からみたフォワード先を設定 (たとえば以下のようにすると Android 実機での ```http://localhost:9000``` へのアクセスが、PC からみた ```http://localhost:9000``` へフォワードされる)
![スクリーンショット 2015-04-05 13.58.29.png](https://qiita-image-store.s3.amazonaws.com/0/1329/b06b1105-dd14-4581-8e0c-a16d96277a6b.png "スクリーンショット 2015-04-05 13.58.29.png")
* 実機から ```http://localhost:<フォワード設定したポート>``` にアクセスすれば、PC 側をプロキシとして PC の開発環境などにアクセスできる。実機側に WiFi なり 4G なりのネットワークコネクションが無いと、うまくいかないぽい。
* 実機側で Service Worker が Register されると、 ```chrome://inspect/#devices``` の画面に Worker の pid が現れる。ここで ```inspect``` をクリックすれば、PC 環境と同様のデベロッパーツールでデバッグできる。
![Kobito.1Y05n7.png](https://qiita-image-store.s3.amazonaws.com/0/1329/4e5762b1-4689-36e4-3fe9-a3ef70a4ccac.png "Kobito.1Y05n7.png")


# 参考

* [Debugging ServiceWorker](https://docs.google.com/presentation/d/1DKu4RZigLvM5XUq3ovsgffQBIHrro5-pii4qEJuyvrQ/edit#slide=id.p)
* [Remote Debugging on Android with Chrome](https://developer.chrome.com/devtools/docs/remote-debugging)