Chrome javascript调试程序断点无效

Question

无论是直接在源/控制台上设置断点还是在我的代码上添加debugger，浏览器似乎都没有响应它们。有什么想法吗？这是我的代码：

 if (select[i].placeholder != undefined && select[i].placeholder != '' ) {
        selected.appendChild(document.createTextNode(select[i].placeholder)); debugger;
    } else if (select[i].options[0].value == '' && select[i].options[0].textContent != '' ) {
        selected.appendChild(document.createTextNode(select[i].placeholder));
    } else {
        selected.appendChild(document.createTextNode('Select an option'));
    }

Answer 1

在Dev Tools中，在Sources面板上，有一个看起来像断点标记的按钮，其中有一条直线：该按钮禁用所有断点。要重新启用它们，请单击按钮。

这是当前启用时的样子（点击它会禁用它们）：

...当他们当前已停用时（点击它启用它们）：

Answer 2

我想我知道发生了什么。通常，您不应在if语句的中间添加断点。那是因为如果语句为false，它将不会运行该行，因此会“跳过”debugger或断点。

因此，在if语句之前或之后添加debugger;

/* Here -- debugger;*/
if (select[i].placeholder != undefined && select[i].placeholder != '' ) {
    selected.appendChild(document.createTextNode(select[i].placeholder)); 
} else if (select[i].options[0].value == '' && select[i].options[0].textContent != '' ) {
    selected.appendChild(document.createTextNode(select[i].placeholder));
} else {
    selected.appendChild(document.createTextNode('Select an option'));
}
/* Or Here -- debugger;*/

取决于您希望通过调试捕获的内容......

Answer 3

Chrome浏览器不喜欢webpack延迟加载的组件，并且经常崩溃。.有时，即使出现无法阻止其他代码运行的错误，它仍然会阻止断点正常工作..超级烦人..重新启动chrome和/或更新它似乎是唯一的帮助。并非总是可以更新/重新启动。

Answer 4

首先检查您的控制台，有时您的脚本中有错误并且脚本甚至没有运行，首先修复这些错误，最终调试器应该开始工作。

Answer 5

我发现如果我在“控制台”选项卡上运行页面，断点会起作用，如果我在“源”选项卡中（例如，查看带有断点的代码），它没有。所以，我切换回“控制台”选项卡并重新加载页面，它工作正常。

OS X 上的 Chrome 91.0.4472.106。

编辑：虽然这似乎并不总是对我有用。我做的另一件事是删除并重新添加断点。

Answer 6

重新启动该应用程序对我有用。