1. ホーム
  2. javascript

[解決済み] Chromeのjavascriptデバッガーブレークポイントは何もしないのですか?

2023-02-15 20:59:16

質問

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

クロームのバージョンは21.0.1180.60 mを使用しています。

私が行った手順

  1. ctrl-shift-i を押してコンソールを表示させました。
  2. Sources をクリックし、デバッグしたい関連する javascript ファイルを選択しました。
  3. 私は、左の行の隣のガターに青いタグを置くことによって、コードを停止したいブレークポイントを設定します。
  4. 私は自分のウェブページ (これは php でレンダリングされたページです) で、javascript コードを開始するボタンをクリックしました。
  5. コードは停止することなく正常に実行されました。

また、Watch Expressionsも機能しないことに気づきました。ウォッチしたい変数が未定義であると言われ続けています。

さらにテストすると、ブレークポイントを失敗させる原因は私のコードであることがわかりました。それは "$("#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;
    });
});

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

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

debugger;

を停止させたい場所で実行し、クロームデベロッパーツールウィンドウを開いた状態で再度実行します。


1つだけ気をつけるべきことは、デバッガの行を削除した後は、必ずクリーンアップすることです。 JavaScriptファイルをYUI compressorを通して実行することがある場合、デバッガー行を削除した後に、デバッガー行の存在を確認する必要があります。 debugger; の行があると、エラーになります。