Chrome javascript调试器断点什么都没做?

cha*_*ser 71 javascript debugging google-chrome

我似乎无法弄清楚Chrome调试工具.

我有铬版本21.0.1180.60米.

我采取的步骤:

  1. 我按下了ctrl-shift-i来调出控制台.
  2. 单击Sources然后选择我想要调试的相关javascript文件.
  3. 我通过在左边的行旁边的装订线上放置一个蓝色标记来设置我想要停止代码的断点.
  4. 我点击了我的网页上的按钮(这是一个php呈现的页面),它启动了javascript代码.
  5. 代码成功运行而没有停止.

我也注意到Watch Expressions也不起作用.它一直告诉我,我想看的变量是未定义的.

进一步的测试发现,这是导致断点失败的代码.它似乎失败了"$("#frmVerification").submit(function(){"line.它没有进入该函数内的断点().

以下是:

//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;
    });
});
Run Code Online (Sandbox Code Playgroud)

Ada*_*kis 139

我不确定为什么你的断点没有击中,但是进入你的代码的一种确定的方法是键入

debugger;
Run Code Online (Sandbox Code Playgroud)

您希望代码停止的位置,然后在打开chrome developer工具窗口的情况下再次运行.


只需要注意一件小事,确保在完成后清理并删除调试器行.如果你曾经通过YUI压缩器运行JavaScript文件,那么debugger;一行的存在将导致它出错.

  • 为了使调试器正常工作,需要在“网络”选项卡下设置“禁用缓存”,否则您将运行缓存的代码。选择此项,然后使用 Ctrl F5 重新加载。 (2认同)

Ste*_*hen 20

这是一个迟到的答案,但我有同样的问题,但答案是不同的.

就我而言,我的代码中有一个sourceURL引用:

//@ sourceURL=/Scripts/test.js
Run Code Online (Sandbox Code Playgroud)

当此Javascript文件被浏览器缩小并加载时,它通常会告知Chrome开发工具未公开的版本.

但是,如果您正在调试未管理的版本并且此行存在,则Chrome开发工具将映射到该sourceURL路径而不是"正常"路径.

例如,如果您在Web服务器上本地工作,那么在Chrome开发工具的源代码选项卡中,给定JS文件的路径将是 http://localhost/Scripts/test.js

如果test.js在底部有这个

//@ sourceURL=/Scripts/test.js
Run Code Online (Sandbox Code Playgroud)

那么断点只有在文件路径是/Scripts/test.js,而不是完全限定的URL 时才有效http://localhost/Scripts/test.js

在Chrome 38中,继续上面的示例,如果您查看"来源"标签,则每个文件都会运行http://localhost/,因此当您点击test.js时,Chrome会加载http://localhost/Scripts/test.js

您可以将所需的所有断点放在此文件中,Chrome也不会触及任何断点.如果在调用test.js中的任何函数之前在JS中放置一个断点然后进入该函数,您将看到Chrome打开一个新的选项卡,其路径为/Scripts/test.js.将断点放在此文件中将停止程序流.

当我@ sourceURL从JS文件中删除该行时,一切正常工作(即您期望的方式).


gum*_*ins 9

可能是这个错误 https://code.google.com/p/chromium/issues/detail?id=278361

这是在Linux上使用我的Chrome 31.0.1650.57(官方版本235101)复制的.

我正在重新启动浏览器来修复它.

  • OSX Capitan上的版本50.0.2661.94(64位)仍然存在问题 (2认同)

小智 8

我遇到了类似的问题.除非我使用,断点不起作用debugger;.我通过"恢复默认值和重新加载"修复了断点问题.它位于Chrome开发者工具,设置,恢复默认值和重新加载中.


小智 5

我遇到过几次这种情况,一开始它在本地主机上工作得很好,突然间,断点不起作用,我切换到127.0.0.1,然后它又工作了。希望有帮助。


Joh*_*der 5

确保脚本带有“调试器”;其中的声明没有被 Chrome 黑盒化。如果是这样,您可以转到“源”选项卡检查并关闭黑盒。

编辑:添加了屏幕截图。

如何关闭黑盒。


Fre*_*der 5

我有一个缩小器,它删除了debugger语句 \xc2\xaf_(\xe3\x83\x84)_/\xc2\xaf

\n