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

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

Answer 3

Chrome 不喜欢 webpack 延迟加载的组件，并且会定期崩溃。有时，如果出现错误，但不会阻止其他代码运行，它仍然会阻止断点工作。超级烦人。重新启动 chrome 和/或更新它似乎是唯一的帮助。虽然更新/重新启动并不总是有效..

Answer 4

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

OS X 上的 Chrome 91.0.4472.106。

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

Answer 5

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

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

/* 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;*/

根据您希望通过调试捕获的内容...