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

Posted 2023-02-22

【中文标题】Chrome javascript 调试器断点不执行任何操作？

【英文标题】：Chrome javascript debugger breakpoints don't do anything?

【发布时间】：2012-08-01 01:13:41

【问题描述】：

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

我有 chrome 版本 21.0.1180.60 m。

我采取的步骤：

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

我还注意到 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;
    );
);

【问题讨论】：

第 2 步中的“来源”应该是“资源”？

我的 chrome 在面板中有以下顺序：元素、资源、网络、来源、时间线、配置文件、审计、控制台。但是，资源不允许我添加断点。只有来源会。

您可以尝试使用简单直接的 javascript 的简单页面来查看断点是否有效。这样就可以知道是不是Chrome 21.0.1180.60的问题了

我还看了很多在线说明，应该有一个“脚本”面板……但我没有那个？

是的。在我的 chrome(20.0.1132.43) 中，它有：元素、资源、网络、脚本、时间线、配置文件、审计、控制台。因此，在 Chrome 21 中，他们似乎将“脚本”更改为“来源”

【参考方案1】：

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

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

【讨论】：

成功了。但它只有在您重新启动后才可见/活跃。重新启动本身并不能解决这个特定问题，这是不可能的。 :)

【参考方案2】：

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

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

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

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

【参考方案3】：

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

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

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

【参考方案4】：

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

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

【参考方案5】：

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

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

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

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

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

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

【参考方案6】：

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

【讨论】：

我使用 grunt-contrib-uglify 来缩小我的 JS。默认情况下，它会从代码中删除调试器指令。请参阅此链接以在您的代码中保留“调试器”说明：***.com/questions/48511619/…

【参考方案7】：

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

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

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

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

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

【参考方案8】：

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

【参考方案9】：

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

在我的例子中，我的代码中有一个 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而不是http://localhost/Scripts/test.js的完全限定URL时才有效

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

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

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

【参考方案10】：

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

点击谷歌浏览器的应用程序标签 右键单击每个文件夹下的 URL > 清除

Screenshot: Applications tab

【讨论】：

拖动控制台输入； localStorage.clear() & enter 然后 sessionStorage.clear() & enter.

【参考方案11】：

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

编辑：添加截图。

【讨论】：

该功能在哪里？截图？

当我投反对票时，没有“停止黑盒”功能的屏幕截图。答案没有帮助，因为人们不得不开始搜索“停止黑盒”功能。答案有所改善。删除反对票。

这就是我要找的。谢谢老哥的回答。

我没有这个选项i.imgur.com/Eq5id5t.png

@Nakilon 我认为他们将其更改为“将脚本添加到忽略列表”和“从忽略列表中删除”。

【参考方案12】：

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

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

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

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

【参考方案13】：

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

【讨论】：

这对我有用。 Ps：我不需要使用“调试器；”。对于在版本 58.0.3029.110 左右寻找它的任何人，单击 3 个垂直点，设置（F1），“恢复默认值并重新加载”是底部的一个按钮。

如果有人没有找到“恢复默认值并重新加载”按钮，这里是 Chrome 93 上的 screenshot。

【参考方案14】：

根据我使用 chrome 的经验，我们需要打开浏览器控制台以在加载页面时运行调试器。

把它放在你想运行的javascript文件中

debugger

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

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

【讨论】：

您在答案中添加了哪些新信息，这些信息不在已发布的答案之一中？

【参考方案15】：

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

debugger;

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

---

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

【讨论】：

我把调试器放在jquery函数里面，还是没有进入。请看一下我上传的代码。这是因为 JQuery 吗？

@chrolli - 我没有看到任何调试器；在代码中，但无论如何，它绝对应该与 jQuery 一起使用。而不是调试器;，在那里抛出一个警报只是为了确保代码被调用

@AdamRackis 感谢那个调试器；提示。真的好用！！ :)

感谢这对我也有用，删除该行后，Chrome 断点功能恢复正常。

要使调试器工作，需要在“网络”选项卡下设置“禁用缓存”，否则您将运行缓存的代码。选择它然后使用 Ctrl F5 重新加载。

【参考方案16】：

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

【参考方案17】：

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

【参考方案18】：

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

【参考方案19】：

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

【参考方案20】：

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

场景：

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

BS Modal 1 在页面加载时呈现（通过 php），并且始终显示在页面上。它用于添加新的相关记录。 （CakePHP....想想 SalesForcey 类型的东西）

BS Modal 2 用于编辑现有的相关记录，它的 html 内容从 ajax 调用中提取并通过 jQuery 附加到 DOM。

Javascript 支持通过标准 html <script> 标签包含的两种模式。

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

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

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

【参考方案21】：

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

这是用我在 Linux 上的 Chrome 31.0.1650.57（官方版本 235101）复制的。

我正在重启浏览器来修复它。

【讨论】：

OSX Capitan 上的 50.0.2661.94（64 位）版本仍然存在问题

刚刚在 Win10 和 Chrome 51 上发生在我身上。我正在使用一个未停靠的开发工具窗口，我杀死了这个窗口，这对我来说就足够了

【参考方案22】：

因此，除了 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")

【讨论】：

@dckuehn 仅当您告诉它时。这是开发工具中暂停错误的一个选项。有时，这是不切实际的。例如，我处理在 3rd 方网站上运行的库代码。如果我在处理库时打开它，每次站点出现错误时都会暂停执行，无论它是否与我的库相关。如果您处于控制之中，并且这是您的网站，那么这是一个不错的选择。对于某些类型的开发，它可能会阻碍。