Firefox 開発ツールを使った Service Workers と Push のデバッグ
原文: Debugging Service Workers and Push with Firefox DevTools on March 11, 2016 by Soledad Penadés
Firefox 44 で Web Push が利用可能になった ことに引き続き、Firefox Developer Edition 47 の開発ツールでは Service Workers と Push Notifications のコードをデバッグできるようになりました。
この記事で採り上げる機能はこちらのスクリーンキャストで説明されています。New Service Worker debugging tools in Firefox Developer Edition 47
文字で読むほうが好きな方はこのままお読みください！
about:debugging
Service Workers の動作は通常の Web Workers と同じではなく、そのライフサイクルも両者で異なります。そのため、開発ツールの デバッガ タブに Service Workers のコードと通常のスクリプトを一緒に表示させることはできません。
そこで、登録された Service Workers と Shared Workers をすべて集めたダッシュボードを新しく追加しました。amongst other debuggable items such as Add-ons.
デバッグを始めるには、まず新しいタブに about:debugging と入力し、画面左の Workers タブをクリックします。
このダッシュボードを開く別の方法として、ツール → Web 開発 → Service Workers の順にメニューをたどる、またはツールバーのメニューから 開発ツール → Service Workers の順にクリックする方法もあります（開発ツール がない場合は、ツールバーメニューの カスタマイズ を利用してください）。
ダッシュボードのリアルタイム更新
このダッシュボードを初めて開いた場合、Service Worker と Shared Worker のセクションに「まだありません。」と表示されているはずです。これらのセクションは Worker の登録に合わせて自動的に更新されます。表示されるボタンも Worker の状態に合わせて変わり、Worker が実行中であれば Push と デバッグ が表示され、登録された Worker がアクティブでなければ Start だけが表示されます。
試してみましょう！ウィンドウで about:debugging を開き、別のウィンドウでは 簡単な Service Worker のデモ を開いてください。Service Worker が登録され、Service Worker のセクションに表示されるはずです。ダッシュボードをリロードする必要はありません！
Service Worker のデバッグ
Service Worker をデバッグするには、その Worker を実行している必要があります。Debug ボタンをクリックするか、まだ実行中でなければ Start をクリックしてください（その Service Worker が登録済で about:debugging のダッシュボードに表示されていることが必要です）。
すると Service Worker のコードが書かれた新しいウィンドウが開きます。ここで 通常のデバッグと同じことはすべて、例えばブレークポイントを設定したり、ステップ実行や変数の確認などを行うことができます。
Push Notifications
Web Push API を用いているコードもデバッグすることができ、Service Worker の push イベントリスナの中にブレークポイントを設定することで実現できます。プッシュ通知を受信すると、デバッガがブレークポイントで停止します。
とても使いやすい機能ですが、ネットワークが一時的に接続できない場合など、手元で解決できない理由によってプッシュ通知の到着が遅れる場合があります。しかし嬉しいことに、その Worker に対して Push ボタンを押すことで、こういった状況でも push イベントに依存したコードをテストすることができます。
このボタンを押すと push payload が送信され、その後 push イベントが間髪入れずに発火します。これにより、サーバからプッシュ通知が届くまで待つ必要がなくなり、開発時間を短くする ことができます。
Shared Workers のデバッグ
Shared Workers のデバッグもサポートされています。とはいえ、Service Workers のデバッグと異なるのは about:debugging で表示される場所が違うことぐらいです。
（キャッシュされた）リクエストのデバッグ
通常のネットワークに向けたリクエストと、Worker によってキャッシュされたリクエストとを見分けることも可能です。キャッシュされたリクエストの場合、転送量 の欄に表示されるのがデータ量ではなく Service Worker と表示されます。
fetch イベントリスナの中にブレークポイントを設定することで、Service Workers が発行するリクエストに割り込んでデバッグすることが可能です。
デバッガがブレークポイントで停止した際に、変数リストの中にある event オブジェクトを確認することで、リクエストされた url や HTTP ヘッダなどを調べることができます。
まとめ
私たちが現在取り組んでいる新機能について、おおまかな説明ができたことと思います。
about:debugging に関するリファレンス は MDN で参照できます。Service Workers についてより詳しく知りたい場合は Service Worker の利用について や、素晴らしいデモと使用例が載っている Service Workers cookbook を確認するとよいでしょう。