web-dev-qa-db-ja.com

ブラウザのデバッガー自体で（jQueryを使用して）動的にロードされたJavaScriptをデバッグする方法は？

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

説明：

使用する必要があります

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

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

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

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

javascriptdebuggingdynamicloaded
77
TwiToiT

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

//# sourceURL=filename.js

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

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

187
Mark

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

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

13
xRavisher

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

「デバッガー」のコーディング。行はその場所でそれを壊すことを強制しました。次に、[ソース]パネルのタブに移動したら、通常のようにブレークポイントを設定し、「デバッガー」を削除できます。ライン。

10
kevinpo

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

コードにdebugger;行がおそらくない実稼働段階をデバッグする場合、CharlesProxyを使用してローカルマップを作成し、「debbuger行を挿入したソースファイルの新しいコピー」を実行することで、これを実現できます。 「。

4
Lluís Suñol

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

_debugger;myFunction();
_

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

0
Alan Samet