在断点，Chrome源代码显示的是缩小的jQuery，而不是原始的jQuery代码。

Question

我正在学习如何使用Chrome工具、源代码和几乎完全用jQuery编写的代码的断点。当我添加一个断点来单击事件时，单击应该(我认为)突出显示jQuery代码行，它侦听单击单击的元素。相反，源代码面板中的显示从显示main.js (包含所有jQuery代码)切换到显示jquery.min.js。我认为这是小型化的jQuery。这对我没什么用。如果可能的话，我希望看到断点在原始jQuery代码中突出显示事件侦听器。我在隐名模式下运行Chrome。

Answer 1

当您使用jQuery设置事件处理程序时，它会创建一个JavaScript事件侦听器，它调用自己的内部包装函数，然后调用回调函数，因为jQuery事件处理程序的调用方式与addEventListener()的工作方式略有不同。因此，如果您在DevTools中设置了一个事件断点，它将指向这个内部包装器，而不是您的代码，而且从那里到您的代码没有简单的方法。除非您尝试调试jQuery本身，否则jQuery代码中的断点并不是非常有用的。

相反，只需在代码中设置一个正常的代码断点即可。例如，如果您有类似的代码

$(".classname").click(function() {
    console.log("clicked");
});

单击“源”选项卡中的console.log行，在那里设置断点。