94

Chrome デバッグ ツールがわかりません。

Chrome バージョン 21.0.1180.60 m を使用しています。

私が取った手順:

  1. ctrl-shift-i を押してコンソールを表示しました。
  2. [ソース] をクリックして、デバッグする関連する JavaScript ファイルを選択します。
  3. 左側の行の横のガターに青いタグを付けて、コードを停止するブレークポイントを設定します。
  4. JavaScript コードを開始する Web ページ (php でレンダリングされたページ) のボタンをクリックしました。
  5. コードは停止することなく正常に実行されました。

また、ウォッチ式も機能しないことに気付きました。監視したい変数が未定義であると言い続けます。

さらにテストしたところ、ブレークポイントが失敗する原因は私のコードであることがわかりました。"$("#frmVerification").submit(function(){" 行で失敗したようです。その function() 内のブレークポイントにはステップ インしません。

以下は次のとおりです。

//function to check name and comment field 
var test = "this is a test";
var test2 = "this is another test";

function validateLogin(){
    //if(userEmail.attr("value") && userPass.attr("value"))
        return true;
    //else
        //return false;
}

//onclick on different buttons, do different things.
function ajaxRequest(){

}
$(document).ready(function(){
  //When form submitted
    $("#frmVerification").submit(function(){
        var username = $("#username");
        var token = $("#token");
        var action = $("#action");
        var requester = $("#requester");
        if(validateLogin()){
            $.ajax({
            type: "post",
            url: "verification.php",
            data: "username="+username.html()+"&token="+token.val()+"&action="+action.val()+"&requester="+requester.val(),
            success: function(data) {
                try{
                    var jsonObj = $.parseJSON(data); //convert data into json object, throws exception if data is not json compatible
                    if(jsonObj.length > 0){//if there is any error output all data
                        var htmUl = $('<ul></ul>');
                        $.each(jsonObj, function(){
                            htmUl.append('<li>' + this + '</li>');
                        });
                        $("#errOut").html(htmUl);
                    }else{
                        alert("Your account is now activated, thank you. If you have already logged in, press OK to go to the home page. If not, you must log in first.");
                        window.location.replace("home.php");
                    }
                }
                catch(e){//if error output error to errOut]
                    $("#errOut").html("PHP module returned non JSON object: <p>"+data+"</p>");
                }
            }
        });
    }
    else alert("Please fill UserName & Password!");
        return false;
    });
});
4

23 に答える 23

176

ブレークポイントがヒットしない理由はわかりませんが、コードにステップインする確実な方法の 1 つは、次のように入力することです。

debugger;

コードを停止したい場所で停止し、chrome 開発者ツール ウィンドウを開いた状態で再度実行します。


注意すべき小さな点が 1 つだけあります。完了したら必ずクリーンアップし、デバッガーの行を削除してください。JavaScript ファイルを YUI コンプレッサーで実行したことがある場合、debugger;行が存在するとエラーが発生します。

于 2012-08-03T01:38:22.323 に答える
16

同様の問題が発生しました。を使用しないと機能しないブレークポイントdebugger;。「デフォルトに戻してリロード」でブレークポイントの問題を修正しました。これは、Chrome 開発者ツール、設定、デフォルトの復元とリロードにあります。

于 2014-08-22T13:33:00.013 に答える
12

おそらくこのバグ https://code.google.com/p/chromium/issues/detail?id=278361

これは、Linux の Chrome 31.0.1650.57 (公式ビルド 235101) で再現されます。また、Windows 10 の My Chrome バージョン 98.0.4758.82 (公式ビルド) (64 ビット) を使用します。

ブラウザ/Windowsを再起動して修正しています。

于 2013-11-21T11:57:14.577 に答える
3

Chrome のブレークポイントが何も起動しないという問題がありました。コードで「デバッガー」を使用しようとしたとき、コードの VM バージョンのコードをステップ実行することしかできませんでした。私の問題は、リソースを正しくマッピングしていなかったことです。再マッピングすると問題が解決しました。

于 2015-07-15T18:52:19.300 に答える
2

マッピングを設定したときと同じホストを URL で使用していることを確認してください。たとえばhttp://127.0.0.1/my-app、ワークスペースをセットアップしてマップしたときに にいた場合、 経由でページを表示すると、ブレークポイントは機能しませんhttp://localhost/my-app。また、ここまで読んでいただきありがとうございます。ここで Chromium の問題に対する私の回答を参照してください。

于 2014-05-28T22:18:48.777 に答える
1

これは Chrome のバグである可能性があります。残念ながら、Chrome では定期的にデバッグが中断されます。多くの場合、ある種のメモリリークがあり、数回のリリースごとに壊れたり変更されたりすることがよくあります。

フォーマットされたソースを使用したデバッグは、現在非常に信頼性が低くなります。

デッドコードを破ろうとしている可能性もあります。

ブラウザではないことを確認するには、Firefox でもデバッグしてみてください。

于 2020-09-04T18:44:37.313 に答える
1

かなり遅い答えですが、上記のどれも私のケースを助けず、何か違うものでした

javascript file type="text/javascript" を参照しているときに、私が作業していたレガシーアプリケーションに欠落していました

<script  src="ab.js" ></script>

1つ下が機能し、ブレークポイントが期待どおりにヒットしていました

 <script  src="ab.js" type="text/javascript"></script>
于 2019-08-13T04:02:02.267 に答える
0

そのため、Adam Rackis の回答に加えて、ブレークポイントより上の JavaScript ファイルにエラーがある場合、フラグを立てたり、debugger;.

次に例を示します。

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")
于 2013-09-25T18:36:30.267 に答える
0

いまいましいブレークポイントが必要です!非常に奇妙な動作 - ソースの通常は赤い点が灰色になっていました。これらとdebugger;ブレークポイントはまだヒットしているように見えますが、実行不可能な HTML のどこかに表示されます。

コードを数時間ハッキングした後、ブレークポイントは最終的に正しくヒットしましたが、「Hello World」とほぼ同等のものが残っていました。ハハハ。

そのため、サーバー側のデータがページに出力されていましたが (私の場合は @razor ステートメントで)、同様のケースでも同じです。

サーバー出力に誤った形式の 0A/0D 文字 (古い改行) が含まれていたため、Chrome の行番号が混乱していました。

サーバーをクリーニングして HTML を挿入し、ブレークポイントを取得しました。

では、CTRL-Z で戻ることができるこのコードの量を見てみましょう...

于 2020-05-19T12:08:49.960 に答える
0

Chrome で経験したように、ブラウザ コンソールを開いて、ページのロード時にデバッガを実行する必要があります。

実行したいJavaScriptファイルのどこかにこれを入れてください

debugger

ブラウザ コンソールを開き、ページをリロードします。

デバッガーは以下の例の画像のように実行されます

ここに画像の説明を入力

于 2017-05-24T02:21:46.900 に答える
-1

10K 行のファイルでも同じ問題が発生しました。ブレークポイントは無視され、
ハードコードされた _debugger ステートメントは機能しましたが、切り替えることができず、ループに配置されると煩わしい場合があります。少しハックですが、機能する私の解決策は、ファイルの先頭に次を追加することです。

let myDebuggerFlag = false;
let myDebugger = function () {
    if (myDebuggerFlag) {
        debugger;
    }
}

次に myDebugger(); を追加します。通常ブレークポイントを使用するインライン。

デバッグをオンにするには、myDebuggerFlag = true; と入力するだけです。コンソールラインで。(もちろん、最初に myDebugger を終了する必要があります。

于 2017-10-03T11:57:09.513 に答える