在断点处，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 行以在那里设置断点。