サービスワーカー(ServiceWorker)/シェアードワーカ(SharedWorker)のデバック方法 - Apache 2.4系でHTTP/2対応サーバを構築してみるテスト。
してみるテストロゴ
Apache 2.4系でHTTP/2サーバを構築してみるテスト。

サービスワーカー(ServiceWorker)/シェアードワーカ(SharedWorker)のデバック方法

マルチスレッド型のJavaScriptに対応したブラウザが増えてきたせいか、サービスワーカー(ServiceWorker)/シェアードワーカ(SharedWorker)を使用したWebサイトも増えてきました。

有名どころではGoogle系サービスやマストドン等が採用しているようです。

ただ、開発に当たっての資料が少ないのが難点。ということで、手始めにデバッグ方法を説明します。

ChromeのSharedWorker/ServiceWokerデバッガの起動

シェアードワーカーの一覧は、アドレスバーに以下のコマンドを入れると表示されます。

chrome://inspect/#workers

サービスワーカーの一覧は、アドレスバーに以下のコマンドを入れると表示されます。

chrome://inspect/#service-workers

すると、以下のような表示となって、シェアードワーカーもしくは、サービスワーカーの一覧が表示されます。(どちらもおなじ構成なので、シェアードワーカーで説明します。)

ワーカスレッドのJavaScriptのURLと、「inspect」と「terminate」

ここで、「inspect」を選ぶと以下の画像のようなデバッガが別ウィンドウで起動します。

あとは、普通のデベロッパーツールと同じです。

ブレークポイントを設定すれば止まって、値を確認することができます。

なお、このウィンドウが開いていると、

var myWorker = new SharedWorker("worker.js");

のようにワーカスレッドのJavaScriptファイルを読み込んだ段階で別ウィンドウ側がブレーク状態となっているので、所望の方法でプログラムを開始してください。

ちなみに一覧表示の「terminate」を押すと、シェアードワーカ/サービスワーカーが停止します。

こちらは、ワーカスレッドのJavaScriptが停止します。 ワーカスレッドのJavaScriptファイルを修正した後に、リロードさせるときに使用します。

NEXT >> トップページに戻る

©Copyrights 2015-2018, non-standard programmer

このサイトは、あくまでも私の個人的体験を、綴ったものです。 軽く参考程度にご利用ください。