98

動的に追加されたスクリプトが、ブラウザーのデバッガーのスクリプトセクションに表示されません。

説明：

私は使用する必要があり、使用しました

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

myScript.jsは、ある条件を満たすときに動的にロードできるようになります...そしてmyFunctionは、スクリプト全体がロードされた後にのみ呼び出すことができます...

ただし、ブラウザーは、動的にロードされたmyScript.jsをデバッガーのスクリプトセクションに表示していません。

ブラウザ自体で動的にロードされたスクリプトをデバッグできるようにするすべての目標を達成するための別の方法はありますか？

4

5 に答える 5

217

動的にロードされたスクリプトに名前を付けて、Chrome /FirefoxJavaScriptデバッガーに表示されるようにすることができます。これを行うには、スクリプトの最後にコメントを配置します。

//# sourceURL=filename.js

このファイルは、[ソース]タブにとして表示されfilename.jsます。私の経験では、名前に'sを使用できますが、/'sを使用すると奇妙な動作をします。

指定されていfilename.jsないドメインは「（ドメインなし）」というフォルダに表示されるため、デバッグエクスペリエンスを向上させるためにドメインを指定すると便利です。たとえば、「カスタム」フォルダを表示する例として、次を使用できます。

//# sourceURL=browsertools://custom/filename.js

完全な例は次のとおりです。

window.helloWorld = function helloWorld()
{
  console.log('Hello World!');
}
//# sourceURL=browsertools://custom/helloWorld.js

詳細について は、「//@sourceurlの動的JavaScript非推奨のブレークポイント」を参照してください。

于 2013-01-03T00:18:50.270 に答える
16

スクリプトファイルまたはスクリプトタグの最後に//# sourceURL=とを使用できます。//# sourceMappingURL=

注： //@ sourceURLおよび//@ sourceMappingURLは非推奨です。

于 2016-09-24T08:33:35.313 に答える
15

OPによって回避策として提案された「//＃sourceURL = filename.js」を使用してみましたが、前回のタブにすでに存在していない限り、[ソース]パネルに表示されませんでした。例外が発生しました。

「デバッガー」のコーディング; ラインはそれをその場所で壊すことを余儀なくされました。次に、[ソース]パネルのタブに表示されたら、通常のようにブレークポイントを設定して、「デバッガー」を削除できます。ライン。

于 2014-05-20T20:55:51.147 に答える
6

このように[ソース]タブに表示されるソースファイルは（ドメインなし）グループに表示されることに注意してください。デバッグする場合はdebugger;、コードに行を追加して、その行を実行する必要があります（通常はソースファイルの実行の開始）、必要な場所にブレークポイントを追加します。

コードに行がない可能性のある本番ステージをデバッグしている場合はdebugger;、CharlesProxyを使用して「debbuger行が挿入されたソースファイルの新しいコピー」にローカルマップを作成することで、これを実現できます。

于 2016-07-01T10:08:33.440 に答える
0

IEでこの種のことを追跡しようとするときは、開発ツール（F12）を開き、コンソールの次の行を使用してブレークポイントを配置する場所を見つけます。

debugger;myFunction();

myFunction()これにより、ブレークポイントにステップインして設定できるデバッガタブに切り替わります。

于 2019-07-10T17:12:42.513 に答える