Chrome javascript 调试器断点不执行任何操作?

IT技术 javascript debugging google-chrome
2021-03-07 19:53:33

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

我有 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;
    });
});
6个回答

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

debugger;

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


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

感谢这对我也有用,删除该行后,Chrome 断点功能恢复正常。
2021-04-25 19:53:33
我把调试器放在 jquery 函数中,它仍然没有进入它。请查看我上传的代码。这是因为 JQuery 吗?
2021-04-26 19:53:33
要使调试器工作,需要在“网络”选项卡下设置“禁用缓存”,否则您将运行缓存代码。选择它,然后使用 Ctrl F5 重新加载。
2021-05-06 19:53:33
@AdamRackis 感谢调试器;小费。真的好用!!:)
2021-05-14 19:53:33
@chrolli - 我没有看到任何调试器;在代码中,但无论如何,它绝对应该与 jQuery 一起使用。而不是调试器;在那里抛出一个警报只是为了确保代码正在被调用
2021-05-15 19:53:33

这是一个迟到的答案,但我遇到了同样的问题,但答案不同。

就我而言,我的代码中有一个 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 中,继续我上面的示例,如果您查看 Sources 选项卡,每个文件都会运行 off http://localhost/,因此当您单击 test.js 时,Chrome 会加载http://localhost/Scripts/test.js

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

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

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

如果有人没有找到“恢复默认值并重新加载”按钮,这里是Chrome 93上的屏幕截图
2021-04-23 19:53:33
那对我有用。Ps:我不需要使用“调试器;”。对于在 58.0.3029.110 左右版本中寻找它的任何人,单击 3 个顶点,设置(F1),“恢复默认值并重新加载”是底部的一个按钮。
2021-05-08 19:53:33

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

这是在 Linux 上用我的 Chrome 31.0.1650.57(官方版本 235101)重现的。

我正在重新启动浏览器以修复它。

OSX Capitan 上的版本 50.0.2661.94(64 位)仍然存在问题
2021-04-22 19:53:33
刚好在我使用 Chrome 51 的 Win10 上发生。我正在使用一个未停靠的开发工具窗口,我关闭了该窗口,这对我来说已经足够了
2021-05-04 19:53:33

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

编辑:添加屏幕截图。

如何关闭黑盒。

@Nakilon 我认为他们将其更改为“添加脚本以忽略列表”和“从忽略列表中删除”。
2021-04-24 19:53:33
该功能位于何处?截屏?
2021-05-08 19:53:33
当我否决它时,没有“停止黑盒”功能的屏幕截图。答案没有帮助,因为人们不得不开始在谷歌上搜索“停止黑盒”功能。答案已经改进。删除反对票。
2021-05-11 19:53:33
我没有这个选项i.imgur.com/Eq5id5t.png
2021-05-11 19:53:33
这就是我一直在寻找的。谢谢大佬解答。
2021-05-14 19:53:33