我正在使用Chrome和我自己的网站。

我从内部知道：

1）我有一个表单，人们可以通过单击此橙色图像按钮进行注册：

2）我检查它，仅此而已： <img class="formSend" src="images/botoninscribirse2.png">

3）在源代码的顶部，有大量的脚本源。我知道该按钮调用哪个按钮，因为我已对其进行了编码：<script src="js/jquery2.js" type="text/javascript"></script>

4）在该文件中，您可以找到：$(".formSend").click(function() { ... });这是由按钮触发的（进行相当复杂的表单验证和提交），而我想要的是能够在任何网站上使用chrome dev工具找到它。

我如何找出元素在哪里调用？

听众标签对我不起作用。因此，然后我尝试查找单击事件侦听器，这对我来说似乎是一个安全的选择，但是...那里没有jquery2.js（而且我真的不知道代码是哪个文件，因此我浪费时间检查所有这些文件。） ）：

我$(".formSend").click(function() { ... });在jquery2.js文件中的功能不存在。

杰西解释了原因：

“最后，您的函数未直接绑定到click事件处理程序的原因是因为jQuery返回了被绑定的函数。jQuery的函数又经过一些抽象层并进行检查，然后在其中的某个地方执行您的函数”。

正如某些人所暗示的，我在下面的一个答案中收集了有效的方法。

亚历山大·帕夫洛夫（Alexander Pavlov）的答案与您想要的最接近。

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

1.设置事件监听器断点

您已经接近这个。

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

2.点击按钮！

Chrome开发者工具将暂停脚本执行，并向您展示这些精巧的压缩代码：

（点击放大）

3.找到光荣的代码！

现在，这里的窍门是不要被按下键所困扰，并且要注意屏幕。

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

4.解释

我没有确切的答案，也没有关于jQuery为什么要经历许多抽象层的解释-我只能说这是因为它确实完成了将使用代码从执行代码的浏览器中抽象出来的工作。

这是带有调试版本的jQuery（即未精简版）的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答案。

最后，您的函数未直接绑定到click事件处理程序的原因是因为jQuery返回了被绑定的函数。jQuery的功能依次经过一些抽象层并进行检查，然后在其中的某个地方执行您的功能。

解决方案1：框架黑匣子

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

根据Chrome的文档：

对脚本进行黑名单处理会怎样？

从库代码引发的异常不会暂停（如果启用了“暂停暂停”功能），进入/退出/跳过会跳过库代码，事件侦听器断点不会在库代码中中断，调试器不会在库中设置的任何断点处暂停码。最终结果是您正在调试应用程序代码，而不是第三方资源。

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

2. 在这里，您可以放置要让Chrome在调试时忽略的文件的RegEx模式。例如：jquery\..*\.js（glob模式/ 人类翻译：jquery.*.js）
3. 如果您要跳过具有多个模式的文件，则可以使用竖线字符来添加文件|，如下所示：（可以说jquery\..*\.js|include\.postload\.js，它的作用类似于“或此模式”。或者继续使用“添加”按钮添加文件。
4. 现在继续下面介绍的解决方案3。

奖金提示！我定期使用Regex101（但还有许多其他功能：）来快速测试我生锈的regex模式，并通过逐步的regex调试器找出我的问题所在。如果您尚不熟练使用正则表达式，建议您开始使用可帮助您编写和可视化正则表达式的网站，例如http://buildregex.com/和https://www.debuggex.com/

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

解决方案2：视觉事件

这是一个出色的工具：

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

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

解决方案3：调试

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

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

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

   

2. 展开Mouse并选择click

3. 现在单击该元素（执行应暂停），然后您正在调试代码。您可以按一下所有代码F11（这是“ 步入”）。或者返回堆栈中的一些跳转。可能会有很多跳跃

解决方案4：钓鱼关键字

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

并搜索#envio或您认为可以启动聚会的任何标签/类/标识，您可能会比预期的更快。

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

如果您不了解这一点，请查看Chrome的调试教程。

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

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

您可以使用findHandlersJS

您可以在chrome控制台中找到处理程序：

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

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

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

更多信息在这里，你可以尝试在此示例站点这里。

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

1. 打开Chrome的控制台（尽管任何装有jQuery的浏览器都可以使用）
2. 跑 $._data($(".example").get(0), "events")
3. 向下钻取输出以找到所需的事件处理程序。
4. 右键单击“处理程序”，然后选择“显示功能定义”
5. 该代码将显示在“源”选项卡中

$._data()只是访问jQuery的数据方法。更具可读性的选择可能是jQuery._data()。

这样的答案有趣的一点是：

从jQuery 1.8开始，“公共API”不再提供事件数据。阅读此jQuery博客文章。您现在应该改为使用此：

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

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

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

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

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