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

Question

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

我有 chrome 版本 21.0.1180.60 m。

我采取的步骤：

我按下 ctrl-shift-i 调出控制台。
单击 Sources，然后选择我要调试的相关 javascript 文件。
我通过在左侧行旁边的排水沟上放置一个蓝色标记来设置我希望代码停止的断点。
我单击了我的网页（这是一个 php 呈现的页面）上启动 javascript 代码的按钮。
代码没有停止就成功运行。

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

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

score 176 · Accepted Answer

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

debugger;

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

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

score 22 · Accepted Answer

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

就我而言，我的代码中有一个 sourceURL 引用：

//@ sourceURL=/Scripts/test.js

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

但是，如果您正在调试未缩小的版本并且此行存在，Chrome 开发工具会映射到该 sourceURL 路径而不是“正常”路径。

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

如果 test.js 在底部有这个

//@ sourceURL=/Scripts/test.js

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

在 Chrome 38 中，继续我上面的示例，如果您查看 Sources 选项卡，每个文件都会运行http://localhost/，因此当您单击 test.js 时，Chrome 会加载http://localhost/Scripts/test.js

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

当我@ sourceURL从 JS 文件中删除该行时，一切都会再次正常运行（即您所期望的方式）。

score 16 · Accepted Answer

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

score 12 · Accepted Answer

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

这是在 Linux 上使用我的 Chrome 31.0.1650.57（官方版本 235101）复制的。还可以在 Windows 10 上使用 My Chrome 版本 98.0.4758.82（官方构建）（64 位）。

我正在重新启动浏览器/Windows 来修复它。

score 5 · Accepted Answer

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

编辑：添加截图。

score 4 · Accepted Answer

我遇到过几次，起初它在本地主机上运行良好，突然，断点不起作用，我切换到 127.0.0.1，然后它再次运行。希望有所帮助。

score 3 · Accepted Answer

确保您已在 chrome 窗口中打开了 javascript 控制台（或源代码）。否则它永远不会到达断点。您可以通过右上角的选项按钮-->工具-->javascript控制台打开javascript控制台。

score 3 · Accepted Answer

我遇到了一个问题，Chrome 的断点没有触发任何东西。当我尝试在我的代码中使用“调试器”时，我只能单步执行我的代码的 VM 版本中的代码。我的问题是我错误地映射了资源。重新映射解决了我的问题。

score 3 · Accepted Answer

3

我有一个缩小器正在剥离debugger语句¯_(ツ)_/¯

于 2019-10-23T16:24:00.697 回答

score 2 · Accepted Answer

我在 chrome 和 firefox 中都遇到了类似的问题，尽管它可能不是您问题的解决方案。我在这里分享，希望它可以帮助其他人。我之前在其他不相关的项目中遇到过这种情况，但直到今天再次出现，我才明白为什么。

设想：

我有一个页面使用来自同一来源的两个引导模式和一组 javascript 文件（blueimp 的真棒 jquery 文件上传）。

BS Modal 1 在页面加载时呈现（通过 php），并且始终存在于页面上。它用于添加新的相关记录。（CakePHP....想想 SalesForcey 类型的东西）
BS Modal 2 用于编辑现有的相关记录，它的 html 内容从 ajax 调用中提取并通过 jQuery 附加到 DOM。
支持通过标准 html<script>标签包含的两种模式的 Javascript。

我注意到断点仅在模态 1 上触发。当代码在动态添加的模态 2 上执行时，它们不起作用，即使很明显代码确实正在评估和运行。弹出警报框，代码类型的事情得到执行，输出遵循代码中规定的逻辑。

由于时间紧迫，我没有深入研究进一步调查，但想把它放在那里并回馈社区。

PS：我一直使用 SO，但这是我的第一篇文章，所以请放轻松 :-)

score 2 · Accepted Answer

确保您在 URL 中使用与设置映射时相同的主机。例如，如果您在http://127.0.0.1/my-app设置和映射工作区时处于此状态，那么如果您通过查看页面，断点将不起作用http://localhost/my-app。另外，感谢您阅读本文。在此处查看我对 Chromium 问题的回答。

score 2 · Accepted Answer

我的解决方案是从应用程序选项卡中清除本地存储、会话存储和 Cookie。之后，Chrome 会在 Sources 中定义的断点处暂停脚本执行。

单击 Google Chrome 的应用程序选项卡
右键单击每个文件夹下的 URL > 清除

屏幕截图：应用程序选项卡

score 1 · Accepted Answer

很晚的答案，但以上都没有帮助我的情况，并且有所不同

在引用我正在工作的旧应用程序中缺少 javascript 文件 type="text/javascript" 时

<script  src="ab.js" ></script>

低于一个工作并且断点按预期命中

 <script  src="ab.js" type="text/javascript"></script>

score 1 · Accepted Answer

确保将断点放在正确的源文件中。一些工具会创建多个代码副本，我们会尝试使用不同的源文件。

Ctrl+P解决方案：不要使用或之类的快捷方式打开文件Ctrl+R，而是从文件导航器中打开它。在源选项卡中，左上方有它的图标。使用它我们可以打开正确的源文件。

score 1 · Accepted Answer

这可能是一个 Chrome 错误。不幸的是，Chrome 经常会中断调试。它经常有某种内存泄漏，并且每隔几个版本就会中断或更改。

使用格式化源进行调试目前非常不可靠。

您也可能试图破解死代码。

为了确定它不是浏览器，您还应该尝试在 Firefox 中调试它。

score 0 · Accepted Answer

因此，除了 Adam Rackis 的回答之外，如果您的 javascript 文件在断点上方有错误，那么无论您标记它还是放入debugger;.

这是一个例子：

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")

score 0 · Accepted Answer

正如我在使用 chrome 时所经历的那样，我们需要打开浏览器控制台以使调试器在加载页面时运行。

把它放在你想运行的 javascript 文件中的某个地方

debugger

打开浏览器控制台并重新加载页面。

调试器将像下面的示例图像一样运行

score 0 · Accepted Answer

我不确定它是如何工作的，但按 F1 进行设置，然后在右下角按“恢复默认值并重新加载”对我有用。

score 0 · Accepted Answer

我需要我该死的断点！非常奇怪的行为 - Sources 中通常的红点变成了灰色；这些和debugger;断点似乎仍然会命中，但会显示在某些不可执行的 HTML 中。

经过几个小时的破解代码后，断点终于被正确命中，但或多或少只剩下相当于“Hello World”的东西。哈哈哈。

所以我在页面中输出了一些服务器端数据（在我的情况下是在@razor 语句中），但在任何类似情况下都是相同的。

服务器输出中有一些格式不正确的 0A/0D 字符 - 旧的回车 - 导致 Chrome 与自己的行号混淆。

清理服务器注入的 HTML，我得到了断点。

现在让我们看看我可以按CTRL-Z返回多少代码...

score 0 · Accepted Answer

我将添加另一个随机答案，因为这个问题是针对我的几次搜索而出现的。我有具有公共和私有方法的 jQuery 对象。模式是：

myObject = (function($){
  function publicFunction() {}
  function privateFunction() {}
  return {
    theOnlyMethod: publicFunction
  }
})(jQuery);

如果我在私有函数内的行上设置断点，Chrome 将不会对其进行调试，该行会向下移动到 return 语句！所以要调试，我必须公开私有函数！今天早上这对我来说是新的（2020 年 8 月 20 日，版本 84.0.4147.125（官方构建）（64 位）），我不敢相信我已经 3 年没有遇到过这种情况了。

score 0 · Accepted Answer

我遇到了这个问题，我意识到在我的情况下它与使用缓存版本的开发工具有关。

添加调试器语句确实会导致它中断，但它会将光标指向错误的行（尽管工具提示变量值实际上是正确的）。

强制刷新按钮上的选项“空缓存和硬重新加载”（在浏览器的左上角，见图）对我有用，断点开始按预期工作。

score -1 · Accepted Answer

我在 10K 行文件中遇到了同样的问题。断点被忽略，
硬编码的 _debugger 语句有效，但它们不能被切换，并且在放置在循环中时会很烦人。我的解决方案，这有点骇人听闻，但它的工作原理是将以下内容添加到文件顶部：

let myDebuggerFlag = false;
let myDebugger = function () {
    if (myDebuggerFlag) {
        debugger;
    }
}

然后我添加一个 myDebugger(); 内联我通常会使用断点的地方。

要打开调试，我只需输入 myDebuggerFlag = true; 在控制台线上。（当然，您必须先退出 myDebugger。

score -1 · Accepted Answer

-1

在我重新启动计算机之前没有任何效果。

当没有任何工作时：重新启动

于 2022-01-16T14:35:19.870 回答

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

23 回答 23

Related

Reference