[解決済み] ブラウザのデバッガで、動的にロードされたJavaScript（jQuery）をデバッグするには？

質問

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

説明してください。

を使用する必要があり、使用したことがあります。

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

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

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

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

どのように解決するのですか?

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

//# sourceURL=filename.js

このファイルは、quot;Sources" タブに次のように表示されます。 filename.js . 私の経験では、名前に 's を使用することができますが、/ を使用すると奇妙な動作が発生します。

ドメインが指定されていないため filename.js というフォルダに表示されるため、デバッグ時の利便性を高めるためにドメインを指定しておくと便利です。

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

完全な例は次の通りです。

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

詳細はこちらをご覧ください。 動的なJavaScriptにおけるブレークポイント 非推奨の //@sourceurl