Chrome 开发工具忽略断点

Question

尝试使用 Chrome 开发工具进行调试，但我的断点不起作用。如果我放入调试器语句，它会触发一个断点，但 devtools 本身似乎无法在用鼠标设置的断点处停止。这似乎是开发工具的一项新“功能”，因为它在过去一直有效。关于这个问题，还有其他人成功修复 chrome 吗？

我正在使用 webpack 进行构建，应用程序以 create-react-app

启动

Answer 1

@boatcoder - 我遇到了同样的问题，再次使用代码 运行 使用 create-react-app。

我能够设置断点，它们会在命中时停止执行，但在动态（热）代码更改后，它们不再起作用——只有未修改函数中的断点。我发现如果我重新加载网页（对于我的应用程序意味着再次登录）然后断点再次工作。

Answer 2

热代码重新加载会覆盖代码（发送新代码块来覆盖您之前使用的功能），因此在这种情况下您的断点将变得无效，因为它们附加到 'old' 代码。我不认为你做错了什么，但很可能看起来像这样：

1. 您在浏览器中启动了 create-react-app。
2. 您在检查器中手动插入了一个断点。
3. 您在代码编辑器中修改了代码。
4. create-react-app 热重载向浏览器发送了一个新代码，它确实覆盖了您之前的代码。
5. 浏览器不再使用您设置断点的代码，而是使用您的新代码。
6. 调试器语句有效，因为它仍在代码中。
7. 重新加载页面后它再次工作，因为 Chrome 检查员记住了您手动设置的断点位置并将它们应用于新代码。