web-dev-qa-db-ja.com

Webワーカーをデバッグする方法

私はHTML 5でWebワーカーを扱ってきましたが、それらをデバッグする方法を探しています。 firebugやchromeデバッガーのようなものが理想的です。コンソールやDOMへのアクセスがなく、デバッグが難しいiffyコードに対して、これに対する良い解決策はありますか？

javascripthtml5google-chromefirebug
55
Zachary K

不足しているconsole.logの高速ソリューションとして、throw JSON.stringify({data:data})を使用できます

23
daralthus

Dev ChannelバージョンのChromeは、ワーカーのクライアントページ内でiframeを使用してワーカーをシミュレートする偽のワーカー実装を挿入することにより、ワーカーのデバッグをサポートします。[スクリプト]ペインに移動し、このシミュレーションには特定の制限がありますが、ワーカースクリプトはクライアントページスレッドで実行されるため、ワーカーで長時間実行される操作はフリーズしますブラウザUI。

56
caseq

WebWorkerは、通常のWebページと同じようにデバッグできます。 Chromeはchrome：// inspect /＃workersでWebWorkersの開発ツールのデバッグを提供します。

目的の実行中のWebworkerを見つけて、「検査」をクリックします。そのWebworker専用の別の開発ツールウィンドウが開きます。公式の[指示] [2]は確認する価値があります。

16
user2519809

chromeデバッガーの[スクリプト]タブで、ワーカーパネルまでスクロールし、[開始時に一時停止]を選択します。これにより、ワーカーをデバッグし、ブレークポイントを挿入できます。別のウィンドウですべて

11
zeacuss

Chrome v35

  • ページを読み込んでChrome Developer Toolsを開きます。

  • ソースタブに移動します。

  • 以下に示すように、開始の一時停止チェックボックスをチェックします。

    Debugging workers in Chrome Dev Tools

  • ページをリロードすると、新しいウィンドウではありますが、デバッガーはWebワーカーで一時停止します！

編集：Chrome（v39を使用しています）の新しいバージョンでは、ワーカーは独自の[ワーカー]タブではなく[スレッド]タブの下にあります（[スレッド]タブは実行中のワーカーがいます）。

10
Ashwin Aggarwal

Chrome 65で始まり、デバッガーの「ステップイン」機能を使用できるようになりました。

enter image description here

詳細については、 リリースノート を参照してください。

9
Philipp Claßen

self.console.log('your debugging message')を使用できます

3
Harshit Jain

受け入れられた答えは、本当に誰にとっても解決策ではありません。

その場合、FirefoxのWeb Workersでconsole.logまたはconsole.debugまたはconsole.errorを使用できます。 バグ＃620935 および バグ＃1058644 を参照してください。

chromeを使用している場合は、通常のスクリプトをデバッグするのと同じようにWebワーカーをデバッグできます。そうすると、console.logがタブに出力されます。ただし、ワーカーが共有されている場合は、chrome://inspectをご覧ください。

特別なヒント：Javascriptを初めて使用する場合、ワーカーを習得するのは非常に難しいため、両方のタイプのワーカー間で一貫したAPIを提供する非常に軽量なラッパーを作成しました。 Worker-Exchange と呼ばれます。

1
Steel Brain

デバッグ目的でワーカーからメッセージ/データにアクセスする簡単な解決策は、ワーカースレッド内からpostMessage()を使用して、必要なデバッグ情報を返すことです。

これらのメッセージは、親プロセスで「キャッチ」される可能性がありますonmessageハンドラー。たとえば、ワーカーからコンソールに返されたメッセージ/データをログに記録できます。これには、ノンブロッキングアプローチであるという利点があり、ワーカープロセスを実際のスレッドとして実行し、通常のブラウザー環境内でデバッグすることができます。このようなソリューションは、ワーカープロセスコードのブレークポイントレベルの検査を有効にしませんが、多くの状況で、デバッグを支援するためにワーカープロセス内から必要なデータを公開する機能を提供します。

単純な実装は次のようになります（関連する抜粋を示します）。

//ワーカーのonmessage関数スコープ内のどこか（必要に応じて何度でも使用）：

postMessage({debug:{message:"This is a debug message"}});

//親のonmessageハンドラー内：

myWorker.onmessage = function(event) {
   if(event.data && event.data.debug) {
      // handle debug message processing here...
      if(event.data.debug.message) {
         console.log("message from worker: %o", event.data.debug.message);
      }
   } else {
      // handle regular message processing here...
   }
};
0
bluebinary

2016年2月、WebStormは Webワーカーのデバッグ のサポートをリリースしました。

WebStorm JavaScriptデバッガーは、これらのバックグラウンドワーカー内のブレークポイントにヒットできるようになりました。フレームを調べて、以前と同じように変数を探索できます。左側のドロップダウンリストで、ワーカーのスレッドとメインアプリケーションスレッドの間をジャンプできます。

WebStorm web worker debugging screenshot

0
Dan Dascalescu

JSON.stringify（）の他に、port.postMessage( (new Object({o: object})) )もあります。たぶん、JSON.stringifyがより役立ちます。

これがお役に立てば幸いです！

0
Cody