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

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

1. 设置事件监听断点

你很接近这个。

1. 打开 Chrome Dev Tools (F12)，然后转到 Sources 选项卡。
2. 向下钻取鼠标 -> 单击（单击放大）
   
   

2.点击按钮！

Chrome Dev Tools 将暂停脚本执行，并为您呈现这个美丽的压缩代码纠缠：

（点击放大）

3.找到光荣代码！

现在，这里的诀窍是不要忘记按下键，并留意屏幕。

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

4. 说明

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

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

    // ...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...

我认为您在“执行暂停并且我逐行跳转”时错过了它的原因是因为您可能使用了“Step Over”功能，而不是 Step In。这是解释差异的StackOverflow 答案。

最后，你的函数没有直接绑定到点击事件处理程序的原因是因为 jQuery 返回一个被绑定的函数。jQuery 的函数依次通过一些抽象层和检查，并在其中的某个地方执行您的函数。

解决方案 1：框架黑盒

效果很好，设置最少，没有第三方。

根据Chrome 的文档：

当你对脚本进行黑盒处理时会发生什么？

从库代码抛出的异常不会暂停（如果启用了异常暂停），单步进入/退出/越过库代码，事件侦听器断点不会在库代码中中断，调试器不会在库中设置的任何断点上暂停代码。最终结果是您调试的是应用程序代码而不是第三方资源。

1. 弹出打开 Chrome 开发者工具（F12或⌘+ ⌥+ i），转到设置（右上角，或F1）。在左侧找到一个名为“ Blackboxing ”的标签

2. 您可以在此处放置您希望 Chrome 在调试时忽略的文件的RegEx模式。例如：jquery\..*\.js（glob模式/人类翻译：jquery.*.js）
3. 如果您想跳过具有多个模式的文件，您可以使用管道字符添加它们|，就像这样:（jquery\..*\.js|include\.postload\.js可以这么说，它的作用类似于“或这个模式”。或者继续使用“添加”按钮添加它们。
4. 现在继续下面描述的解决方案 3。

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

在“源”面板中工作时，您还可以使用上下文菜单。查看文件时，您可以在编辑器中右键单击并选择 Blackbox Script。这会将文件添加到“设置”面板的列表中：

解决方案 2：视觉事件

这是一个很好的工具：

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

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

解决方案 3：调试

您可以在单击页面中的某个位置时暂停代码，或者当 DOM 被修改时……以及其他类型的 JS 断点，这些都是有用的。你应该在这里应用黑盒以避免噩梦。

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

1. 打开 Dev Tools -> Sources 选项卡，然后在右侧找到Event Listener Breakpoints：

   

2. 展开Mouse并选择click

3. 现在单击该元素（执行应暂停），您现在正在调试代码。您可以按所有代码F11（即Step in）。或者在堆栈中返回几跳。可以有很多跳跃

解决方案 4：钓鱼关键字

随着开发工具激活，就可以搜索整个代码库（在所有文件中的所有代码）与⌘+ ⌥+F或：

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

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

如果这有点超出您的知识范围，请查看Chrome 的调试教程。

听起来像“......我逐行跳转......”部分是错误的。您是 StepOver 还是 StepIn，您确定不会不小心错过相关电话吗？

也就是说，正是因为这个原因，调试框架可能会很乏味。为了缓解这个问题，您可以启用“启用框架调试支持”实验。调试愉快！:)

您可以使用findHandlersJS

您可以通过在 chrome 控制台中执行以下操作来找到处理程序：

findEventHandlers("click", "img.envio")

您将在 chrome 的控制台中打印以下信息：

• element
  在其中注册事件处理程序的实际元素
• events
  数组，包含我们感兴趣的事件类型（例如单击、更改等）的 jquery 事件处理程序的信息
• handler
  实际事件处理程序方法，您可以通过右键单击它并选择 Show function definition 来查看
• selector
  为委托事件提供的选择器。对于直接事件，它将为空。
• 目标
  包含此事件处理程序所针对的元素的列表。例如，对于在文档对象中注册并以页面中的所有按钮为目标的委托事件处理程序，此属性将列出页面中的所有按钮。您可以将它们悬停并查看它们以 chrome 突出显示。

此处有更多信息，您可以在此处的示例站点中尝试。

此解决方案需要jQuery 的 data 方法。

1. 打开 Chrome 的控制台（尽管任何加载了 jQuery 的浏览器都可以工作）
2. 跑 $._data($(".example").get(0), "events")
3. 深入输出以查找所需的事件处理程序。
4. 右键单击“处理程序”并选择“显示函数定义”
5. 代码将显示在“来源”选项卡中

$._data()只是访问jQuery的数据方法。一个更具可读性的替代方案可能是jQuery._data().

这个SO答案的有趣点：

从 jQuery 1.8 开始，事件数据不再可从数据的“公共 API”获得。阅读这篇 jQuery 博客文章。您现在应该改用它：

jQuery._data( elem, "events" ); elem 应该是一个 HTML 元素，而不是一个 jQuery 对象或选择器。

请注意，这是一个内部的“私有”结构，不应修改。仅将其用于调试目的。

在旧版本的 jQuery 中，您可能必须使用旧方法，即：

jQuery( elem ).data( "events" );

与版本无关的 jQuery 将是： (jQuery._data || jQuery.data)(elem, 'events');