如何使用开发人员工具查找Chrome中按钮/元素运行的代码

Question

我正在使用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功能不存在。

Jesse解释为什么 down in his answer：

  

＆＃34;最后，你的函数没有直接绑定到click事件处理程序的原因是因为jQuery返回一个绑定的函数。 jQuery的功能反过来经历了一些抽象层和检查，在那里的某个地方，它执行你的功能。＆＃34;

编辑：我已按照你们中的一些人的建议收集了这个问题产生的所有方法in one answer down below。

Answer 1

Alexander Pavlov's answer最接近你想要的。

由于jQuery的抽象和功能的广泛性，必须跳出很多篮球才能获得事件的重要性。我已经设置了jsFiddle来展示这项工作。

---

1。设置事件侦听器断点

你很接近这个。

1. 打开Chrome开发工具（F12），然后转到“来源”标签。
2. 深入研究鼠标 - ＆gt;点击
   
   （点击放大）

---

2。单击按钮！

Chrome Dev Tools会暂停脚本执行，并向您展示这种美妙的缩小代码：

（点击放大）

---

3。找到光荣的代码！

现在，这里的诀窍是不会被带走按下键，并留意屏幕。

1. 按 F11 键（步入）直到出现所需的源代码
2. 源代码终于到了
   • 在上面提供的jsFiddle示例中，我必须在到达所需的事件处理程序/函数之前按 F11 108次
   • 您的里程可能会有所不同，具体取决于用于绑定事件的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...

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

最后，你的函数不直接绑定到click事件处理程序的原因是因为jQuery返回一个被绑定的函数。 jQuery的函数反过来经历了一些抽象层和检查，而某处在那里，它执行你的函数。

Answer 2

解决方案1：框架黑盒子

效果很好，只是设置了一些，但没有第三方。

修改：自编写此解决方案以来，Chrome（以及我确定的其他浏览器）使黑盒子脚本变得更容易。

根据Chrome's documentation：

  

黑名单时会发生什么？

     

从库代码抛出的异常不会暂停（如果暂停   异常已启用），单步执行/退出/覆盖会绕过库   代码，事件监听器断点不会破坏库代码，The   调试器不会在库代码中设置的任何断点上暂停。该   最终结果是您正在调试应用程序代码而不是第三个   党的资源。

这是更新后的工作流程：

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



1. 这是您放置要避免通过的文件的 RegEx 模式的位置。例如：jquery\..*\.js（人翻译：{{1​​}}）
2. 如果您要跳过多种模式的文件，可以使用竖线字符添加它们，如下所示：jquery.*.js。或者只是继续添加＆＃34;添加＆＃34;按钮。
3. 现在应用下面描述的解决方案3 。

  

奖金提示：我使用Regex101（但还有很多其他人）来快速测试我生锈的正则表达式模式并找出我的正则表达式错误的步骤-step调试器。

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



---

解决方案2：视觉事件



It's a good tool to have

---

解决方案3：完成代码

这种痛苦但很容易（ blackboxing 在这里证明非常有用）。

1. 打开开发工具 - ＆gt; “来源”标签，右侧找到jquery\..*\.js|include\.postload\.js：

   

2. 展开Event Listener Breakpoints并点击......好，Mouse。

3. 现在点击元素（执行应该暂停），然后开始游戏：开始按 F11 （ Step in ）来浏览所有代码。坐下来，可能会有很多跳跃。

---

解决方案4：生存模式

我总是留下⌘ + ⌥ + F 或：



并搜索click或者您认为开始参与的任何标记/类/ ID，阅读所有调查结果以尝试找出正在运行的代码，感觉失败并感受到必须要有一种安全的方式来真正了解按钮触发的是什么。

但要注意，有时不仅#envio而且img重叠，而且您甚至无法知道是什么触发了代码。你可能不应该使用这种方法。

Answer 3

听起来像“......我一行一行地跳......”部分错了。你是StepOver还是StepIn，你确定你不小心错过了相关的电话吗？

也就是说，出于这个原因，调试框架可能很乏味。为了缓解这个问题，您可以enable the "Enable frameworks debugging support" experiment。快乐的调试！ ：）

Answer 4

您可以使用 findHandlersJS

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

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

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

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

更多信息here，您可以在此示例网站here中尝试。

Answer 5

此解决方案需要jQuery's data method。

1. 打开Chrome控制台（虽然任何加载了jQuery的浏览器都可以使用）
2. 运行$._data($(".example").get(0), "events")
3. 深入查看输出以找到所需的事件处理程序。
4. 右键单击“handler”并选择“Show function definition”
5. 代码将显示在“来源”标签
中

$._data()只是访问jQuery的数据方法。更可读的替代方案可以是jQuery._data()。

有趣点this SO answer：

  

从jQuery 1.8开始，事件数据不再存在   可从“公共API”获取数据。阅读this jQuery blog post。   你现在应该使用它：

     

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

     

请注意，这是一个内部的“私人”结构，并且   不应该修改。仅用于调试目的。

     

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

     

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

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