google-chrome-devtools - Chrome 开发工具忽略断点

Question

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

我正在使用 webpack 构建，并且该应用程序从create-react-app

标签： google-chrome-devtools

Answer 1

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

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