Chrome JavaScript调试器断点没有作用?

104

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

我的Chrome版本是21.0.1180.60 m。

我所做的步骤:

  1. 按下ctrl-shift-i打开控制台。
  2. 点击Sources,然后选择要调试的相关JavaScript文件。
  3. 通过在左侧边距处放置蓝色标签,在希望代码停止的位置设置断点。
  4. 点击我的网页上的按钮(这是一个PHP渲染的页面),启动JavaScript代码。
  5. 代码成功运行而没有停止。

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

进一步测试发现是我的代码导致了断点失败。似乎它在" $ ("#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;
    });
});

你的第二步中的“Sources”应该是“Resources”吗? - Deqing
我的Chrome面板中按顺序有以下内容:元素、资源、网络、源代码、时间轴、配置文件、审核、控制台。然而,只有源代码可以添加断点,资源无法添加。 - chaser
是的。在我的Chrome(20.0.1132.43)中,它有:元素、资源、网络、脚本、时间轴、配置文件、审计、控制台。所以看起来在Chrome 21中,他们将“Scripts”更改为“Sources”。 - Deqing
当Chrome在断点处不暂停脚本执行时,我也遇到过这样的情况。我无法弄清楚为什么会发生这种情况,可能是某些条件下重现的错误。 - humkins
我在Firefox上尝试了我的React应用程序,它可以正常运行;但是在Chrome v102.0.5005.115(官方版本)上尝试时失败了。之前它是可以工作的。 - Ricardo
显示剩余6条评论
26个回答

181

我不确定为什么您的断点没有触发,但是一种可靠的步入代码的方法是输入:

debugger;

在你想让代码停止的地方加上一个断点,然后用 Chrome 开发者工具窗口重新运行。


还有一件小事需要注意,确保在完成后清理并删除调试器行。如果你曾经通过 YUI 压缩程序运行 JavaScript 文件,那么存在 debugger; 行会导致其出错。


1
我在jQuery函数中放置了调试器,但它仍然没有进入。请查看我上传的代码。这是因为jQuery吗? - chaser
1
@chrolli - 我在代码中没有看到任何调试器,但无论如何,它应该可以与jQuery一起正常工作。请不要使用debugger;,而是在其中添加一个alert以确保代码被调用。 - Adam Rackis
1
@AdamRackis 感谢你的调试器提示。真的非常有用!! :) - gsaslis
1
“调试器”提示确实很有用,但是了解为什么它能起作用而在浏览器中正常设置断点却无法起作用会更好。 - Francesco Borzi
2
为了使调试器正常工作,需要在网络选项卡下设置“禁用缓存”,否则您将运行缓存代码。选择此选项,然后使用Ctrl F5重新加载。 - CYoung
显示剩余4条评论

25
这是一个晚回答,但我遇到了相同的问题,但答案不同。
在我的情况下,我的代码中有一个sourceURL的参考。
//@ sourceURL=/Scripts/test.js
当该Javascript文件被压缩并由浏览器加载时,通常会告诉Chrome Dev Tools未压缩版本的位置。但如果您正在调试未压缩的版本并且存在此行,则Chrome Dev Tools会映射到该sourceURL路径而不是“正常”路径。例如,如果您在本地Web服务器上工作,则在Chrome Dev Tools的“Sources”选项卡中,给定JS文件的路径将为http://localhost/Scripts/test.js,如果test.js文件底部有这个内容。
//@ sourceURL=/Scripts/test.js

如果文件路径为/Scripts/test.js,而不是完全合格的URLhttp://localhost/Scripts/test.js,那么断点将只在前者有效。

在Chrome 38中,以我上面的示例为例,如果您查看“源”选项卡,每个文件都从http://localhost/运行,因此当您单击test.js时,Chrome会加载http://localhost/Scripts/test.js

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

当我从JS文件中删除@ sourceURL行时,一切恢复正常(即按预期方式运行)。


20

我遇到了类似的问题。除非我使用debugger;,否则断点无法正常工作。我通过“恢复默认值并重新加载”来解决我的断点问题。它位于Chrome开发者工具中的设置中,“恢复默认值并重新加载”。


1
那对我起作用了。附注:我不需要使用“debugger;”。对于任何在版本58.0.3029.110或者类似版本中寻找它的人,点击三个竖点,设置(F1),然后“恢复默认值并重新加载”是底部的一个按钮。 - www-0av-Com
如果有人找不到“恢复默认值并重新加载”按钮,在此附上Chrome 93的屏幕截图 - OfirD
1
“恢复默认值并重新加载”对我来说并没有解决问题。但是,它做得非常好,完全删除了所有设置、断点和监视表达式,所以我不得不从头开始重新做一切,甚至回到尝试解决断点不再工作的问题。谢谢。 - John Smith

13

2
在OSX Capitan上,版本为50.0.2661.94(64位)仍存在问题。 - Mexx
刚刚我在Win10上使用Chrome 51时遇到了这个问题。我正在使用一个未连接的开发工具窗口,我关闭了该窗口,这对我来说已经足够了。 - Chris Marisic

6
请确保包含"debugger;"语句的脚本未被Chrome加入黑匣子。您可以转到“Sources”选项卡查看并关闭黑匣子功能。
编辑: 添加截图。 如何关闭黑匣子

1
那个功能在哪里?有截图吗? - oldwizard
当我对“停止黑盒测试”功能进行了投票,没有截图。答案没有帮助,因为人们必须开始搜索“停止黑盒测试”功能。现在答案已经改进了,我撤销投票。 - oldwizard
这就是我一直在寻找的。谢谢你提供的答案,伙计。 - Kishan Patel
我没有这个选项 https://i.imgur.com/Eq5id5t.png - Nakilon
@Nakilon 我认为他们将其更改为“添加到忽略列表”和“从忽略列表中删除”。 - John Alexander

5

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


4

我遇到了一个问题,Chrome的断点没有触发任何内容。当我在代码中使用“debugger”时,我只能在我的代码的VM版本中逐步执行代码。我的问题是我错误地映射了资源。重新映射解决了我的问题。


4

我曾使用一个压缩工具,它会去除debugger语句 ¯\_(ツ)_/¯


我使用grunt-contrib-uglify来压缩我的JS代码。默认情况下,它会从代码中删除调试器指令。请参考此链接以保留您代码中的 'debugger' 指令: https://stackoverflow.com/questions/48511619/preserve-debugger-keyword-grunt-uglify - Faks

4

请确保您在Chrome窗口中已打开JavaScript控制台(或源代码)。否则,它将永远无法命中断点。

您可以通过右上角的选项按钮 -> 工具 -> JavaScript控制台来打开JavaScript控制台。


3
请确保在URL中使用与设置映射时相同的主机。例如,如果您在设置和映射工作区时处于http://127.0.0.1/my-app,那么如果您通过http://localhost/my-app查看页面,则断点将无法正常工作。 此外,感谢您阅读到这里。请在此处查看我对Chromium问题的答复here

我本来希望这个能解决我的问题,但是它没有 :(我可以确认代码在更新的日志行下运行了,但是Chrome DevTools无法暂停(VS Code也是一样)。 - oVo

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接