如何使用开发人员工具在Chrome中findbutton/元素运行的代码
我正在使用Chrome和我自己的网站。
我从里面知道：
1 ）我有一个表单，人们通过点击这个橙色的图像button注册：
2 ）我检查它，这就是它： <img class="formSend" src="images/botoninscribirse2.png">
3 ）在源代码的顶部，有大量的脚本源。 当然，我知道button调用哪一个，我编码它 ： <script src="js/jquery2.js" type="text/javascript"></script>
4 ）在该文件中，您可以find： $(".formSend").click(function() { ... }); 这是由button触发（做一个相当复杂的表单validation和提交）， 我想要的是能够find在任何网站上使用铬开发工具。
我们如何找出元素在哪里调用？
听众选项卡不适合我
所以然后我试着寻找点击事件侦听器，这似乎是一个安全的赌注，但是…有没有jquery2.js在那里（我真的不知道哪个文件的代码，所以我会浪费时间检查所有这些…）：
My $(".formSend").click(function() { ... }); 函数内jquery2.js文件不存在。
杰西解释了为什么 在他的答案 ：
“最后，为什么你的函数没有直接绑定到click事件处理程序，是因为jQuery返回了一个被绑定的函数，而jQuery的函数又通过了一些抽象层和检查，并且在那里执行你的函数。
编辑：我已经收集了这个问题的所有方法出现在下面的一个答案下面 ，你们中的一些人build议。
亚历山大·帕夫洛夫的答案是最接近你想要的。
由于jQuery的抽象性和function性的广泛性，为了深入了解事件的真相，必须跳出许多圈子。 我已经build立了这个jsFiddle来演示这个工作。
1.设置事件监听器断点
你靠近这一个。
- 打开Chrome开发工具（F12），并转到源选项卡。
- 深入到鼠标 – >点击
（点击放大）
2.点击button！
Chrome开发工具将暂停脚本执行，并呈现给你这个美丽的缩小代码的纠缠：
（点击放大）
3.find辉煌的代码！
现在，这里的诀窍就是不要轻易按下按键，并留意屏幕。
- 按下F11键（Step In），直到出现所需的源代码
- 源代码终于达成了
- 在上面提供的jsFiddle示例中，我必须按F11 108次才能到达所需的事件处理程序/函数
- 您的里程可能会有所不同，这取决于用于绑定事件的jQuery（或框架库）的版本
- 有足够的奉献精神和时间，你可以find任何事件处理程序/function
4.解释
我没有确切的答案，也没有解释为什么jQuery经历了许多层次的抽象 – 我所能想到的是，这是因为它的作用是从执行代码的浏览器中抽象出它的用法。
这是一个带有jQuerydebugging版本的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”function，而不是Step In，因此我认为你在“ 执行暂停并且一行一行 ”的时候错过了它。 这是一个StackOverflow答案解释的差异。
最后，你的函数没有直接绑定到click事件处理程序的原因是因为jQuery返回一个被绑定的函数。 jQuery的函数依次通过一些抽象层和检查，并在那里执行你的函数。
以下是一些解决scheme：
解决scheme1（工作很好，只是一些设置，但没有第三方）
框架黑箱化：
- 打开Chrome开发者工具（ F12或⌘ + ⌥ + i ）并进入设置（右上angular或F1 ）
- 就在那里，你会发现左边的一个标签叫做“ Blackboxing ”
- 这就是您要避免通过的文件的正则expression式模式。 例如：
jquery\..*\.js（ 人类翻译：jquery.*.js） - 如果您想跳过具有多种模式的文件，可以使用pipe道字符来添加它们，如下所示：
jquery\..*\.js|include\.postload\.js。 或者继续添加他们与“添加”button。 - 现在应用下面描述的解决scheme3 。
更多关于这个的 ： https ： //developer.chrome.com/devtools/docs/blackboxing
奖金提示 ：我使用Regex101来快速testing我的生锈的正则expression式模式，并找出我的错误与正则expression式分步debugging器。 当然还有其他的。
解决scheme2（工作方便，但你需要安装一个扩展）
视觉事件 ：
个人喜欢。 它奇妙地工作，但它是一个扩展，它不使用Chrome的开发工具。 只是供参考。
解决scheme3（痛苦但容易的一种）
-
打开开发工具 – >源选项卡，并在右侧find
Event Listener Breakpoints：
-
展开
Mouse，然后单击…以及click。 - 现在点击元素（执行应该暂停），在这里开始游戏：开始按F11 （这是步入 ）来通过所有的代码。 坐好，可以有一吨的跳跃。
- 可能会有很多你不想/需要拖拽自己的脚本，所以把它与上面描述的方法1结合起来。
解决scheme4（生存模式）
我总是用Ctr + Shift + F （所有来源的文本search）和search#envio或任何你认为开始聚会的标签/标识#envio ， 读取所有的发现，试图找出代码可以运行 ，感觉输家并且觉得有一个安全的方法才能真正知道button触发了什么。
但是请注意，有时不仅有一个img而且有很多divs重叠，你甚至不知道是什么触发了这个代码。 你可能不应该使用这种方法。
听起来像“…，我一行一行地跳……”部分是错误的。 你StepOver或StepIn，你确定你不会不小心错过相关的电话？
也就是说，debugging框架可能因为这个原因而很乏味。 为了缓解这个问题，你可以启用“启用框架debugging支持”实验 。 快乐debugging！ 🙂
你可以使用findHandlersJS
你可以在chrome控制台中find处理程序：
findEventHandlers("click", "img.envio")
您将在Chrome的控制台中获得以下信息：
- 元件
事件处理程序注册的实际元素 - 事件
有关我们感兴趣的事件types的jquery事件处理程序的信息的数组（例如，点击，更改等） - 处理器
通过右键单击并select显示函数定义，您可以看到实际的事件处理程序方法 - select
select器提供了委托事件。 直接事件将是空的。 - 目标
列出该事件处理程序所针对的元素。 例如，对于在文档对象中注册的委托事件处理程序，并且定位页面中的所有button，此属性将列出页面中的所有button。 你可以将它们hover在chrome中看到它们。
更多信息在这里 ，你可以尝试在这个例子网站在这里 。
这个解决scheme需要jQuery的数据方法 。
- 打开Chrome的控制台（尽pipe任何浏览器加载jQuery将工作）
- 运行
$._data($(".example").get(0), "events") - 深入查看输出以查找所需的事件处理程序。
- 右键单击“处理程序”并select“显示function定义”
- 代码将显示在Sources选项卡中
$._data()只是访问jQuery的数据方法。 更可读的替代scheme可以是jQuery._data() 。
有意思的是这个SO回答 ：
从jQuery 1.8开始，事件数据不再可以从“公共API”获取数据。 阅读这个jQuery博客文章 。 你现在应该用这个来代替：
jQuery._data( elem, "events" );elem应该是一个HTML元素，而不是一个jQuery对象或select器。请注意，这是一个内部的“私人”结构，不应该修改。 仅用于debugging目的。
在旧版本的jQuery中，您可能必须使用以下旧方法：
jQuery( elem ).data( "events" );
版本不可知的jQuery将是： (jQuery._data || jQuery.data)(elem, 'events');
