首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Chrome javascript调试器断点什么都不做?

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

Stack Overflow用户
提问于 2012-08-03 09:30:28
回答 23查看 135K关注 0票数 93

我似乎搞不懂Chrome的调试工具。

我有chrome版本21.0.1180.60m。

我采取的步骤:

我按ctrl-shift-i组合键打开源代码的console.

  • Clicked,然后选择我要调试的相关javascript文件。

  • 我通过在左侧行旁边的装订栏上放置蓝色标记,在希望代码停止的位置设置断点。

  • 我单击网页(呈现为php的页面)上启动javascript代码的按钮。

  • 代码成功运行但没有停止。

<>G211

我还注意到Watch表达式也不起作用。它一直告诉我,我要监视的变量是未定义的。

进一步的测试发现,是我的代码导致断点失败。在“$(”#function“).submit(){”“行上似乎失败了。它不会进入该函数()内部的断点。

下面是:

代码语言:javascript
复制
//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;
    });
});
EN

回答 23

Stack Overflow用户

回答已采纳

发布于 2012-08-03 09:38:22

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

代码语言:javascript
复制
debugger;

在您希望代码暂停的位置,然后在chrome developer tools窗口打开的情况下再次运行。

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

票数 173
EN

Stack Overflow用户

发布于 2014-11-06 02:27:12

这是一个迟来的答案,但我有相同的问题,但答案是不同的。

在我的例子中,我的代码中有一个sourceURL引用:

代码语言:javascript
复制
//@ sourceURL=/Scripts/test.js

当这个Javascript文件被浏览器缩小并加载时,它通常会告诉Chrome Dev工具未缩小的版本在哪里。

但是,如果您正在调试未最小化的版本,并且此行存在,则Chrome Dev工具将映射到该sourceURL路径,而不是“正常”路径。

例如,如果您在本地web服务器上工作,则在Chrome Dev工具的源选项卡中,给定JS文件的路径将为http://localhost/Scripts/test.js

如果test.js在底部有这个

代码语言:javascript
复制
//@ sourceURL=/Scripts/test.js

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

在Chrome38中,继续我上面的例子,如果你看一下源代码标签,每个文件都运行在http://localhost/上,所以当你点击test.js时,Chrome会加载http://localhost/Scripts/test.js

你可以把你想要的所有断点放在这个文件中,Chrome永远不会命中任何一个。如果您在JS调用test.js中的任何函数之前在JS中放置了一个断点,然后进入该函数,您将看到Chrome打开了一个路径为/Scripts/test.js的新选项卡。在此文件中放置断点将停止程序流。

当我去掉JS文件中的@ sourceURL行时,一切都恢复正常(也就是你所期望的方式)。

票数 21
EN

Stack Overflow用户

发布于 2014-08-22 21:33:00

我也遇到了类似的问题。除非我使用debugger;,否则断点不起作用。我用“恢复默认值并重新加载”修复了我的断点问题。它位于Chrome开发者工具、设置、恢复默认设置和重新加载中。

票数 15
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11788081

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档