2012-12-21 7 views
8

たとえば、私はajaxリクエストを持っていて、それは<script src='buggy.js'></script>を返します。動的に読み込まれたjavascriptはソースパネルに表示されませんか?

問題は、ソースまたはリソースパネルに表示されないという問題です。つまり、ブレークポイントを追加したり、要素が実行されているかどうかを調べたりするなど、すばらしいことはできません。

ネットワークパネルのjsファイルのソースしか見ることができませんでした。

クロムをソースパネルに追加する方法はありますか?
あなたは動的に追加されたスクリプトをどのようにデバッグするのですか?

カナリーを使用する。

+0

推測私は回避策を見つけましたhttp://stackoverflow.com/questions/9092125/how-to-debug-dynamically-loaded-javascriptwith-jquery-in-the-browsers-debugge – resting

+0

スクリプトはどのくらい読み込まれていますか? src属性のscriptタグをDOMに手動で挿入すると、ソースパネルに表示されます。スクリプトがevalを使用して追加されている場合や、javascriptフレームワーク(例:jQuery)を使用してDOMに挿入した場合でも、動作させるにはsourceURLを指定する必要があります。 – vsevik

答えて

0

( "ダイナミックJavaScriptのでブレークポイント")(オリジナルリンクは下のbroken--アーカイブされたリンクです)https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript

http://web.archive.org/web/20141016164821/https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascriptを参照してください。

+0

問題のスクリプトが[ソース]タブに表示されない場合でも、実際には機能しません。 –

+0

私はそれがロードされていないと思いますか?あなたはネットワークパネルでそれを見ることができますか? –

+0

ええ、私の場合、それはネットワークパネルに表示されます。また、私は "例外でブレーク"し、動的コードのいくつかによってスローされた場合、デバッガは壊れ、スニペットはスクリーンショット[here](http:// stackoverflow)のような新しいタブで表示されます。 com/questions/17367560/chrome-development-tool-vm-file-from-javascriptを参照してください)。そのタブでは、完全なデバッグが可能です(変数、ステッピングなど)。だから私は、意図的な例外を導入し、それを打ち破ることで、それを回避することができます。これはいくつかの理由で最適ではありません。これはChrome 28.0.1500.71でのものです。 –

2

私は同じ問題を抱えていましたが、意図的な例外よりも優れた回避策が見つかりました。クロム開発ツールの中にブレークポイントを設定するのではなく、コードを変更する必要があります。

OPの回避策として提案されていた「//#sourceURL = dynamicScript.js」を使ってみましたが、前回から自分のタブに既に存在していない限り、まだ表示されませんでした例外が発生しました。

"デバッガ;ラインはそれをその場所で壊すように強制した。その後、[ソース]パネルの自分のタブに入ったら、通常のようにブレークポイントを設定して、 "デバッガ"を削除することができました。ライン。

+0

[ソース]タブの下の(ドメインなし)リストにも表示されることがあります。 – Splaktar

関連する問題