DevTools在生成的缩小文件中显示断点，而不是源文件？

Question

我跟随this tutorial关于如何使用DevTools插入断点。我已打开the example page并在click事件中添加了一个断点，如本教程的第2部分所示。

但是，当我单击按钮时，DevTools不会突出显示function onClick() {文件中的get-started.js，正如教程所说的那样。相反，它突出显示缩小文件（end.min.js）中的缩小函数：

为什么会这样？我该如何解决？我想按照教程进行操作，但将断点添加到缩小文件中非常困难。

我不确定end.min.js来自何处：“网络”标签不显示正在加载。我不确定它是否相关，但当我尝试view the source of the page时，Chrome会显示＆＃34; loading＆＃34;永远的图标。

Chrome是否通过

做一些聪明的事情

Answer 1

这似乎是一个扩展（我说密码管理器）也在添加事件监听器，并且你的断点首先捕获了这个监听器。

您可以在禁用扩展程序的情况下进行测试（可能需要刷新页面），或者只需按“恢复”即可转到下一个监听器。

Answer 2

您确定要遵循该教程吗？我跟着这个：

  

DevTools允许您在执行过程中暂停代码，并且   检查那个时刻所有变量的值。工具   暂停代码称为断点。立即尝试：

     

  
• 返回演示并按下Command + Option + I（Mac）或Control + Shift + I（Windows，Linux）打开DevTools。
  
• 点击“来源”标签。
  
• 单击“事件侦听器断点”以展开该部分。 DevTools   显示可扩展事件类别的列表，例如动画和   剪贴板。
  
• 在鼠标事件类别旁边，点击展开
  
• 检查   点击复选框。
  

预期的错误显示：

此外，您必须激活已捕获异常的暂停，并且看到您提供的图像似乎没有激活。

但是我看到你重新加载页面时是否打开DevTools，弹出另一个错误，也许你关闭DevTools，重新加载页面然后再试一次？