BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] WebKit、FireBug、IE8 Developer Toolなどのデバッガで動的ロードのJavaScriptをデバッグできますか？

2023-03-16 16:36:12

質問

から 最近の質問 のように、部分ビューを動的にロードするためのJavaScript関数をすでに作成しました。そのため、動的ロードのJavaScriptをデバッグすることができません。なぜなら、読み込まれたJavaScriptはすべて"eval"関数によって評価されるからです。

しかし、以下のスクリプトを使用することで、新しいJavaScriptを作成する方法を発見し、現在のドキュメントのヘッダーに動的にスクリプトを作成しました。読み込まれたスクリプトはすべてHTML DOMに表示されます（デバッガを使えば見つけることができます）。 

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

ところで、ほとんどのデバッガー（IE8 Developer Toolbar、Firebug、Google Chrome）は、動的スクリプトにブレークポイントを設定することができません。なぜなら、デバッグ可能なスクリプトは、ページがロードされた後、最初にロードされなければならないからです。

動的なスクリプト コンテンツまたはファイルでのデバッグのためのアイデアはありますか?

更新1 - テスト用ソースコードの追加

someVariableの値をデバッグしようとする場合、以下のxhtmlファイルを使用することができます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

回答から、FireBugでテストしてみました。結果は、以下の画像のように表示されるはずです。

altテキスト http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0m0ugSGXPaY-/undebugable-firebug-html.PNG

ページロード後に追加される "dynamicLoadingScript" スクリプトをご覧ください。

altテキスト http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDqm41Wc3h0yk/undebugable-firebug-script.PNG

しかし、FireBug の script タブに表示されません。

更新2 - ダイナミックロードスクリプトにデバッグブレークポイントを作成する

altテキスト http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAETo4Qoiw/Debugger-VS2010.png

altテキスト http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl-UXXbHFE/Debugger-GoogleChrome.png

上の画像は両方とも、スクリプトのいくつかの行に "デバッガー "ステートメントを挿入すると、動的ロード スクリプトでブレークポイントを発生させることができることを示しています。しかし、両方のデバッガーは、ブレーク ポイントにコードを表示しません。したがって、これを行うには無駄です。

ありがとうございます。

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

クロームを使用して同じことを行うことも可能です。Chrome にはパーサー属性を指定する機能があり、動的 JS の一部をファイルとして表示させ、それを参照してブレーク ポイントを設定することができます。

設定する必要がある属性は 

//# sourceURL=dynamicScript.js

ここで、dynamicScript.jsはスクリプトファイルブラウザに表示されるべきファイルの名前です。

その他の情報 はこちら

Paul Irish もまた、このことについて ツーリングとウェブアプリ開発スタック

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します