サービス ワーカーの機能強化
各サービス ワーカーを通過するサービス ワーカーとネットワーク要求を操作できるように、ネットワーク、アプリケーション、およびソースのツールが改善されました。
この機能強化により、次のタスクが簡略化されます。
- サービス ワーカーのタイムラインに基づいてデバッグします。
- ブートストラップの要求の開始と期間。
- サービス ワーカーの登録に更新します。
- フェッチ イベント ハンドラーを使用した要求のランタイム。
- クライアントを読み込むためのすべてのフェッチ イベントのランタイム。
- フェッチ イベント ハンドラー、イベント ハンドラーのインストール、およびイベント ハンドラーのアクティブ化のランタイムの詳細について説明します。
- ページ スクリプト情報を使用して、フェッチ イベント ハンドラーにステップインおよびアウトします。
この機能強化は、次のツールに及びます。
ネットワーク ツール。 サービス ワーカーを介して実行されるネットワーク要求を選択し、 タイミング ツールでサービス ワーカーの対応するタイムラインにアクセスします。
アプリケーション ツール。 サービス ワーカーをデバッグするには、[ サービス ワーカー ] ページを使用します。
ソース ツール。 フェッチ イベント ハンドラーにステップインするときにページ スクリプト情報にアクセスします。
ネットワーク
ネットワーク ツールのサービス ワーカー デバッグ機能には、次のいずれかの方法でアクセスできます。
- ネットワーク ツールで直接。
- アプリケーション ツールで開始しました。
要求ルーティング
要求ルーティングを視覚化しやすくするために、タイムラインにサービス ワーカーの起動イベントと respondWith フェッチ イベントが表示されるようになりました。 サービス ワーカーを介して渡されたネットワーク要求をデバッグして視覚化するには:
- サービス ワーカーを経由したネットワーク要求を選択します。
- タイミング ツールを開きます。
イベントをフェッチする
respondWithフェッチ イベントの詳細については、respondWithの左側にあるドロップダウン矢印をクリックしてください。
元の要求と受信した応答の詳細を表示するには、対応するドロップダウン矢印をクリックします。
アプリケーション
サービス ワーカーの更新タイムライン
Microsoft Edge DevTools チームは、サービス ワーカーの更新ライフサイクルを反映するために 、アプリケーション ツールにタイムラインを追加しました。 このタイムラインには、インストールイベントとアクティブ化イベントが表示されます。 各イベントには、詳細を示す対応するドロップダウン矢印があります。
ルーティングとフェッチ イベントを要求する
ネットワーク ツールを使用して、サービス ワーカーのタイムラインにアクセスできるようになりました。 この機能は、パフォーマンスを向上させ、UI の重複を最小限に抑え、より包括的なデバッグ エクスペリエンスを作成します。
デバッグしているサービス ワーカーを開きます。
[ ネットワーク ] ボタンをクリックして、 要求ルーティング エクスペリエンスを開きます。
イベント要求と応答情報をフェッチするには、 respondWith ドロップダウン矢印を使用します。
[ネットワーク] ツールには、デバッグ中のサービス ワーカーを経由したネットワーク要求が表示されます。 自動フィルターは、探索を絞り込む方法です。
ストレージを 管理するには、「アプリケーション ツール」も参照してください。
ソース
スタック情報の詳細を確認するには、フェッチ ハンドラーでブレークポイントを設定します。 詳細は、ページ スクリプトでリソースが要求される場所につながります。
デバッガーがフェッチ ハンドラー内で一時停止すると、結合されたスタック情報が右側のパネルに表示されます。 その後、スタック フレーム内を移動できます。
今後の作業
Microsoft Edge DevTools チームは、キャッシュの詳細をさらに開発する予定であり、 プログレッシブ Web アプリケーション (PWA) 開発者向けのサービス ワーカー デバッグ エクスペリエンスを改善するためのより多くの方法を調査しています。