54

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

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

また

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

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

4

4 に答える 4

81

これを壊したい js ファイルに追加します。

debugger;

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

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

于 2012-10-29T21:36:16.660 に答える
42

アップデート

承認されたフォームは、 (アット#マーク) ではなく (ハッシュタグ)を使用するようになりました。@

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

//#sourceURL=/path/to/file

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

JMac からの追加の良い点:

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

オリジナル

この記事に出くわす前に、約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>

まだ発見していないこと:

  • これは、インライン スクリプトのスクリプト ブロックごとに行う必要がありますか?
  • スクリプト ブロックの最後の行である必要がありますか? （この記事は、これに対する答えがイエスであることを示唆しています）
于 2012-10-29T21:24:01.290 に答える
4

すでに述べたように、使用できます//@ sourceURL。//@ sourceURLChrome はインライン スクリプトをサポートしていないようです。それは eval 式で動作します。ソース マップに関するこの HTML5 の記事では、eval ブロッ​​クの名前付けと、コード内の無名関数の名前付けについて詳しく説明しています。

eval を使用する代わりに、script タグまたは JSONP を埋め込んでみることができます。

于 2012-10-30T05:05:55.520 に答える