Chrome javascript 调试器断点不起作用答案

【问题标题】：Chrome javascript debugger breakpoints are not workingChrome javascript 调试器断点不起作用
【发布时间】：2022-03-12 03:33:06
【问题描述】：

无论我是直接在源/控制台上设置断点还是在我的代码上添加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'));
    }

【问题讨论】：

我看到你已经接受了一个回答，说他们没有被击中，因为控制流中没有到达你有断点的代码。这真的是问题所在吗？你在上面的第二行有（比如说）一个断点，但是该行上面的条件是假的？

标签： javascript debugging

【解决方案1】：

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

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

...当它们当前禁用（点击它启用它们）：

【讨论】：

在我的情况下，我只需要重新启动 chrome。花一个小时弄清楚！
@YashVekaria - 重启什么？您当然不需要重新启动任何东西来打开和关闭 Chrome 中的断点。您最好发布一个新的、完整的问题，并完整描述您正在做什么、您正在重新启动什么、如果您不这样做会发生什么等。然后人们将能够提供帮助。
这在我之前发生过几次，然后就叫它一天。切换这个似乎已经解决了。谢谢。

【解决方案2】：

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

【讨论】：

不知道为什么这被否决了，但当 Chrome 突然停止在断点处停止时，这就是我必须定期做的事情。我猜 Chrome 本身存在某种错误。

【解决方案3】：

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

OS X 上的 Chrome 91.0.4472.106。

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

【讨论】：

在 Windows 10 上的“92.0.4515.107（官方版本）（64 位）”中切换到“控制台”选项卡对我有用。
这对我有用。 Chrome LINUX 97.0.4692.71

【解决方案4】：

我想我看到了正在发生的事情。通常，不应在 if 语句中间添加断点。那是因为如果该语句为假，那么它将不会运行该行，因此会“跳过”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;*/

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

【讨论】：

找到了这个项目（因为我的断点被 chrome 忽略了）我认为应该更改标题 - chrome 不会忽略断点。问题应该是请帮我把断点放在正确的位置。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

另一种情况：断点位于函数/方法中，由于类型错误或其他原因而永远不会被调用。

【讨论】：

【解决方案8】：

对我来说，重新启动或更改调试器设置不起作用。使用 babel.config 开发 Material-UI (V4) 应用：

export const presets = [
  ['@babel/preset-env', { targets: { node: 'current' } }],
  '@babel/preset-typescript',
];

我的源文件不知何故被复制了，我将断点放在了错误的文件中（同名）。我通过从控制台日志中选择源打开了正确的文件。

我认为问题在于保存了旧映射，因为我在重新渲染我的 React 应用程序（使用实时 Hot Reaload 模式）时放置了一个断点。

【讨论】：