JavaScript
Chrome
ServiceWorker

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

More than 3 years have passed since last update.

Service Worker Hackathon で教えてもらったのでまとめておく。

2015/04/05 時点での記事。


前提


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

  2. Chrome 再起動

  3. デベロッパーツールを開き Settings - Experiments のメニューで Shiftキーを6回押す と現れる Service workers in Resources panel にチェック
    スクリーンショット 2015-04-05 13.31.28.png

  4. デベロッパーツールを一度閉じて、再度開く


デバッグあれこれ

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


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



  • chrome://serviceworker-internals にアクセス

  • 個別に Unregister もできる
    Kobito.qW4oId.png


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


  • デベロッパーツールの Resources - Service Workers を開く

  • Scope の横にあるゴミ箱アイコンを使って Unregister できる(sw.js を更新したときなど、わりと頻繁に使う)

スクリーンショット 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

    • この画面からバージョン単位でのキャッシュ削除もできる。右クリックメニューで 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

  • 実機から http://localhost:<フォワード設定したポート> にアクセスすれば、PC 側をプロキシとして PC の開発環境などにアクセスできる。実機側に WiFi なり 4G なりのネットワークコネクションが無いと、うまくいかないぽい。

  • 実機側で Service Worker が Register されると、 chrome://inspect/#devices の画面に Worker の pid が現れる。ここで inspect をクリックすれば、PC 環境と同様のデベロッパーツールでデバッグできる。
    Kobito.1Y05n7.png


参考