Chrome DevTools won't let me set breakpoints on certain lines

enter image description here

In the image above, I tried setting breakpoints on every line from line 437 to line 443. However, I cannot set breakpoints on lines 439 and 440. When the function runs, the breakpoints on lines 437, 438, 441, and 442 are ignored. Chrome breaks on line 443. This means that I cannot do some debugging before the first conditional runs.

When I click on lines 439 or 440, the breakpoint appears for half a second and jumps to line 443.

Is this a bug or am I missing something? How do I set a breakpoint at or before line 439?

33068 次浏览

如果您正在使用 js 缩小和源地图,请确保它们与您的源代码保持一致。

最近,运行 System.js 和 Babel 对我来说成了一个问题,而且由于 ES6的普通翻译,我还没有开始缩小/映射。解决方案似乎是将断点添加到!传输的文件中,一个匹配的断点将自动出现在原始文件的相应行中。

当我编写一些代码来测试我的想法时,我在 chrome 开发工具源代码面板片段中遇到了同样的问题。

我工作的唯一方法是关闭开发工具面板,刷新页面,然后重新打开

这个问题发生在我在调试模式下修改代码之后

今天我很沮丧,但我找到了问题所在。我试图在一个孤立函数中放置一个断点(没有命名它)。我一修好它,一切都很好。聪明——但是希望能有哪怕一点点的暗示这就是事实。

我想我的同学和我今天也有这个问题。我们进行了更改,然后按 Ctrl + S (或 Cmd + S)将更改保存到调试器中,然后就可以添加断点了。

在我的例子中,我不能在调用函数行上放置一个断点,但它对函数起作用了... ... 很奇怪,但至少起作用了。

我只是遇到了这个问题,并意识到我在 dev tools 源代码中看到的并不是实际运行在浏览器中的代码。

确保清空了缓存并重新加载,并且有最新的代码。

我的问题在源地图的定义。 我通过这篇文章解决了我的 chrome 调试问题: 《 https://www.mistergoodcat.com/post/the-joy-that-is-source-maps-with-vuejs-and-typescript 》

我已经差不多到了,只需要修改 vue.config.js: Devtool: “ inline-source-map”-> devtool: “ eval-source-map”

在我的案例中,很可能是 devtools 中的一个 bug。当我单击在异步函数中设置断点时,似乎什么也没有发生,没有断点的可视指示。虽然在函数之外,它正确地显示了蓝色标记。

但是当我运行代码时发现所有的断点实际上都已经设置好了。