奇怪的Chrome调试器行为

Question

我在使用chrome调试器时遇到了很多问题。有时我不能在某些位置启用断点，其他问题包括没有断点的行的随机暂停，无法评估绝对定义的变量。

我见过并且渴望解决的最奇怪的事情如下：

我从事件侦听器断点到达此处，正如可以在右侧窗格中看到的那样。起初我在第4121行放了一个断点，我想看看elem是什么。它无法评估，说它未定义。

现在我评论了一切。它仍然符合代码。注意突出显示的区域。这不是我的选择。这是尚未执行的代码。亮点没有任何意义。

我可以做些什么来获得更好的调试体验？

编辑：我刚刚尝试使用Firefox，令我惊讶的是它的行为与Chrome几乎相同（即点击注释掉的代码）。可能会有一些合理的解释。

Answer 1

“调用堆栈和范围”面板中的信息与暂停的代码中的信息不匹配。您的应用程序使用缩小版本的jQuery运行，但未压缩的版本显示在Sources中。

如果您自己运行未压缩的版本，则应在这些面板中看到以下内容。如果使用缩小版本，则应该看到已有的版本，但“源”视图将显示缩小版本，除非您配置了源映射。由于您似乎在未压缩版本中注释掉了代码，因此您可能没有使用源地图。

旁注：如果您确实使用了源地图并编辑了缩小版本，则必须重新生成地图，否则映射将全部出错。

这让我觉得更有可能是因为多次引用jQuery而引起的问题。确保在解决方案中只有一个jQuery引用，否则无法保证在给定时间加载哪个版本。

Answer 2

如果您在Dev Tools中对Javascript进行了编辑，则需要 ctr + s （保存）编辑，然后才能启用断点。