ブラウザーのデバッガー自体で動的に読み込まれたJavaScript（jQueryを使用）をデバッグする方法は？

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

説明：

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

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

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

ただし、ブラウザーのデバッガーのスクリプトセクションに動的に読み込まれたmyScript.jsが表示されません。

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

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

//# sourceURL=filename.js

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

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

あなたは使用することができます//# sourceURL=し、//# sourceMappingURL=あなたのスクリプトファイルまたはスクリプトタグの終わりに。

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

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

「デバッガ」のコーディング 線がその位置で強制的に切断しました。次に、[ソース]パネルのタブに表示されたら、通常のようにブレークポイントを設定して、「デバッガ」を削除しました。ライン。

この方法で[ソース]タブに表示されるソースファイルは（ドメインなし）グループに表示されます。デバッグする場合debugger;は、コードに行を追加し、その行を実行する必要があります（通常はソースファイルの実行の開始）を指定し、必要に応じてブレークポイントを追加します。

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

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

debugger;myFunction();

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