web-dev-qa-db-ja.com

AJAX（特にjQuery）経由でロードされたJavascriptをデバッグするにはどうすればよいですか

最近、より複雑なプロジェクトでコーディングスタイルを変更し、ページ（およびその埋め込みスクリプト）を「オンデマンド」でロードするようにしました。ただし、これらのスクリプトは次のようにロードされているため、デバッグするのは困難です。

jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });

または

$('#some-container').load('/myOtherPage');

これらのスクリプトは完全に実行されますが、デバッグしている場合、これらの動的にロードされたページとスクリプトにブレークポイントを設定するにはどうすればよいですか？

jqueryajaxxmlhttprequestfirebuggoogle-chrome-devtools
48
BLSully

[〜＃〜] update [〜＃〜]

受け入れられたフォームには、#（アットシンボル）ではなく@（ハッシュタグ）が付きます。

IE条件付きコンパイルステートメントとその他の問題との競合を避けるために構文が変更されました（これを指摘してくれたOleksandr PshenychnyyとVarunkumar Nagarajanに感謝します）

//#sourceURL=/path/to/file

これは実際、コードのブロックを識別するのに役立つ任意の文字列にすることができます。

JMacからの追加の良い点：

私にとって、jsファイルは「（ドメインなし）」というグループ内のソースリストに表示されていました。最初にそれを見逃したので、言及する価値があるかもしれません！

[〜＃〜] original [〜＃〜]

この記事 に出くわす前に、私は上記と約1週間苦労しました。私の開発環境では本当に完璧に機能します（これを書いているChrome 22）。

Firebugは、開発者が指定したeval（）バッファーもサポートしています。eval（expression）の最後に次のように行を追加するだけです。

//@ sourceURL=foo.js

たとえば、次の単純なhtmlドキュメントがある場合：

<!DOCTYPE html>
<html>
<body>
    <p>My page's content</p>
    <div id="counter"></div>
    <script type="text/javascript">
        //if this page is loaded into the DOM via ajax 
        //the following code can't be debugged 
        //(or even browsed in dev-tools)

        for(i=0;i<10;i+=1) {
            document.getElementById('counter').innerText = i;
        }

        //but if I add the line below
        //it will "magically" show up in Dev Tools (or Firebug)

        //@ sourceURL=/path/to/my/ajaxed/page
    </script>
<body>
</html>

まだ発見していないもの：

  • これは、インラインスクリプトのすべてのスクリプトブロックに対して実行する必要がありますか？
  • スクリプトブロックの最後の行にする必要がありますか？ （記事では、これに対する答えはyesであると示唆しています）
40
BLSully

これを破壊したいjsファイルに追加してください：

debugger;

次に、他のデバッガーと同じようにステップイン/オーバー/アウトします。

動的にロードされたスクリプトとページに機能します。私の知る限りChromeでのみ動作します。

73
Squeee123

この問題は、 新しいプラグマ を使用して一般的に解決されたようです。

//# sourceURL=filename

「ハッシュ」に注意してください#ではなく '_' @シンボル。

ソースにその行を含めることにより、その行への参照がデバッガーに表示されます！

9
sdw

既に述べたように、//@ sourceURLを使用できます。 Chromeはインラインスクリプトの//@ sourceURLをサポートしていないようです。eval式で動作します。 ソースマップに関するこのHTML5記事 の詳細evalブロックの命名とコード内の匿名関数の命名。

Evalを使用する代わりに、スクリプトタグまたはJSONPを埋め込むことができます。

4
Varunkumar Nagarajan