Web Worker や Service Worker はデバッグが大変だと思っていました。
Chrome には Worker 専用のデバッグツール chrome://inspect/#workers が組み込まれていることを知ったのでご紹介です。
この記事では、次のようなシーンで使えるデバッグの方法を紹介します：
- Worker 内での console.log の出力確認
- よくあるトラブルの解決方法
環境
- Google Chrome 120以降（最新版推奨）
- Web Worker または Service Worker を使用したウェブアプリケーション
注意: Chrome のバージョンによって DevTools の UI や機能の場所が若干異なる場合があります。この記事は Chrome 120 以降を想定していますが、基本的な機能は同じように利用できます。
Worker デバッグツールの基本
Chrome には Worker 専用のデバッグツールが組み込まれています。このツールにアクセスする方法は2つあります：
-
アドレスバーに以下を直接入力
chrome://inspect/#workers -
DevTools からアクセス
- F12 キーまたは右クリック > 検証 で DevTools を開く
- Application タブを選択
- サイドバーから Service Workers セクションを選択
Tip: DevTools が開いている状態で Ctrl+Shift+P (Mac では Cmd+Shift+P) を押し、"Show Workers" と入力することでも Web Workers 一覧を表示できます。
デバッグツールを開くと、現在実行中のすべての Worker が一覧表示されます。表示される情報は Worker の種類（Web Worker/Service Worker）によって若干異なりますが、主な情報として：
- Worker のスクリプトファイルのパス
- Worker の状態（"running"/"stopped"など）
- 登録時刻（Service Worker の場合）
- 所属するオリジン（ドメイン）
- Worker ID
- Worker のスコープ（Service Worker の場合）
これらの情報を確認できます。また、各 Worker の横にある "inspect" リンクをクリックすることで、そのWorker専用のDevToolsウィンドウを開くことができます。
デバッグの実践的な手法
コンソールログの確認
SharedWorker 内での console.log() の出力が DevTools コンソールには表示されない場合がありますが、このツールなら表示されます。
- Worker 一覧から対象の Worker を選択
- inspect をクリック
- 新しく開いた DevTools ウィンドウでコンソールタブを選択
この方法で、Worker 内での出力やエラーメッセージを確認できます。
トラブルシューティング
デバッグ中によく遭遇する問題とその解決方法をまとめました：
Worker が表示されない場合
- ページを再読み込み
- DevTools を再起動（閉じて開き直す）
- Chrome ブラウザ自体を再起動
デバッグ接続が切れる場合
- Worker の状態を確認（再起動されていないか）
- ネットワーク接続を確認
- ブラウザのキャッシュをクリア
まとめ
Chrome の Worker デバッグツールのよいところ：
- Worker の実行状態をリアルタイムで確認可能
- コンソール出力やエラーメッセージを個別に確認
特に PWA（Progressive Web Apps）の開発やバックグラウンド処理を多用するアプリケーションの開発時には、このツールの活用が開発効率の向上に大きく貢献すると思います。