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

Question

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

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

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

我不确定end.min.js来自哪里：网络选项卡不会显示它被加载。我不确定它是否相关，但是当我尝试使用view the source of the page时，Chrome会永久显示“加载”图标。

Chrome是否做得很聪明

Answer 1

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

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

Answer 2

你确定你正在学习这个教程吗？我跟着这个：

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

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

并且预期的错误显示：

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

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