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

  • 95
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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

参考