亚历山大·巴甫洛夫的答案最接近你想要的。

由于jQuery的抽象和功能的广泛性，为了获得事件的实质，必须跳过很多箍。我已经设置了这个jsFiddle来演示工作。

1. 设置事件侦听器断点

你在这个问题上很接近。

1. 打开 Chrome 开发工具 （F12），然后转到“源”标签。
2. 向下钻取到鼠标 - >单击
   
   （单击以缩放）

2. 点击按钮！

Chrome 开发工具将暂停脚本执行，并向您展示这种精细化代码的精美纠缠：

（单击以缩放）

3. 找到光荣的代码！

现在，这里的诀窍是不要被按键冲昏头脑，并留意屏幕。

1. 按键（单步执行），直到出现所需的源代码F11
2. 源代码终于到达
   • 在上面提供的 jsFiddle 示例中，我必须按 108 次才能到达所需的事件处理程序/函数F11
   • 您的里程可能会有所不同，具体取决于用于绑定事件的jQuery（或框架库）的版本
   • 只要有足够的投入和时间，您就可以找到任何事件处理程序/函数

4. 解释

我没有确切的答案，也没有解释为什么jQuery会经历许多抽象层 - 我所能建议的是，这是因为它所做的工作是从执行代码的浏览器中抽象出它的用法。

这是一个jsFiddle，带有jQuery的调试版本（即，未缩小）。当您查看第一个（非缩小的）断点上的代码时，您可以看到代码正在处理许多事情：

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

我认为您在尝试“执行暂停，我逐行跳转”时错过了它的原因是，您可能使用了“步过”功能，而不是“步入”。以下是解释差异的StackOverflow答案。

最后，函数未直接绑定到单击事件处理程序的原因是因为 jQuery 返回一个绑定的函数。jQuery的函数依次经历一些抽象层和检查，在它的某个地方，它执行你的函数。

解决方案1：忽略列表（以前是“黑匣子”）

工作出色，设置最少，没有第三方。文档说：

使用 Chrome DevTools 的“源”面板单步执行代码时，有时您会将鼠标悬停在无法识别的代码上。您可能在已安装的某个 Chrome 扩展程序的代码上暂停了操作。若要从不在扩展代码上暂停，请使用“忽略列表”。

以下是更新的工作流程：

1. 弹出打开 Chrome 开发者工具（或 ++），转到设置（右上角或 ）。在左侧导航/列中选择名为“忽略列表”的页面/选项卡F12⌘⌥iF1"
   • 您可能需要检查调试器中是否看到太多噪音Add content scripts to ignore list

2. 这是您放置希望Chrome在调试时忽略的文件的正则表达式模式的地方。例如：（球形模式/人工翻译：jquery\..*\.jsjquery.*.js)
3. 如果要跳过具有多个模式的文件，可以使用管道字符添加它们，如下所示：（可以这么说，它的作用类似于“或此模式”。或者继续使用“添加”按钮添加它们。|jquery\..*\.js|include\.postload\.js
4. 现在继续执行下面描述的解决方案 3。

奖金提示！我经常使用Regex101（但还有很多其他的：）来快速测试我生锈的正则表达式模式，并找出我使用分步正则表达式调试器的错误之处。如果你还没有“流利”地使用正则表达式，我建议你开始使用帮助你编写和可视化它们的网站，比如 http://buildregex.com/ 和 https://www.debuggex.com/

在“源”面板中工作时，也可以使用上下文菜单。查看文件时，可以在编辑器中单击鼠标右键，然后选择 。这会将文件添加到“设置”面板中的列表中：Ignore List

解决方案 2：视觉事件

这是一个很好的工具，可以：

Visual Event 是一个开源的 Javascript 书签，它提供了有关已附加到 DOM 元素的事件的调试信息。视觉事件显示：

• 哪些元素附加了事件
• 附加到元素的事件的类型
• 将触发将与事件一起运行的代码
• 定义附加函数的源文件和行号（仅限 Webkit 浏览器和 Opera）

解决方案 3：调试

当您单击页面中的某个位置或修改 DOM 时，可以暂停代码...以及其他类型的JS断点，这些断点将很有用。您应该在此处应用黑盒以避免噩梦。

在这种情况下，我想知道当我单击按钮时究竟发生了什么。

1. 打开“开发工具->源选项卡，然后在右侧找到：Event Listener Breakpoints

   

2. 展开并选择Mouseclick

3. 现在单击该元素（执行应暂停），您现在正在调试代码。您可以遍历所有代码按下（即单步执行）。或者在堆栈中返回几个跳跃。可以有大量的跳跃F11

解决方案4：钓鱼关键字

激活 Dev Tools 后，可以使用 ++ 搜索整个代码库（所有文件中的所有代码），或者：⌘⌥F

并搜索或您认为启动派对的任何标签/类/ id，您可能会比预期的更快地到达某个地方。#envio

请注意，有时不仅有一个但有很多元素堆叠在一起，您可能不知道哪一个触发了代码。img

如果您对此有点不了解，请查看Chrome的调试教程。