如何使用开发人员工具在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议。

5 Solutions collect form web for “如何使用开发人员工具在Chrome中findbutton/元素运行的代码”

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

由于jQuery的抽象性和function性的广泛性,为了深入了解事件的真相,必须跳出许多圈子。 我已经build立了这个jsFiddle来演示这个工作。


1.设置事件监听器断点

你靠近这一个。

  1. 打开Chrome开发工具(F12),并转到源选项卡。
  2. 深入到鼠标 – >点击
    Chrome开发工具 - >源选项卡 - >鼠标 - >点击
    (点击放大)

2.点击button!

Chrome开发工具将暂停脚本执行,并呈现给你这个美丽的缩小代码的纠缠:

Chrome开发工具暂停脚本执行 (点击放大)


3.find辉煌的代码!

现在,这里的诀窍就是不要轻易按下按键,并留意屏幕。

  1. 按下F11键(Step In),直到出现所需的源代码
  2. 源代码终于达成了
    • 在上面提供的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(工作很好,只是一些设置,但没有第三方)

框架黑箱化:

在这里输入图像说明

  1. 打开Chrome开发者工具( F12 + + i )并进入设置(右上angular或F1
  2. 就在那里,你会发现左边的一个标签叫做“ Blackboxing
  3. 这就是您要避免通过的文件的正则expression式模式。 例如: jquery\..*\.js人类翻译: jquery.*.js
  4. 如果您想跳过具有多种模式的文件,可以使用pipe道字符来添加它们,如下所示: jquery\..*\.js|include\.postload\.js 。 或者继续添加他们与“添加”button。
  5. 现在应用下面描述的解决scheme3

更多关于这个的 : https : //developer.chrome.com/devtools/docs/blackboxing

奖金提示 :我使用Regex101来快速testing我的生锈的正则expression式模式,并找出我的错误与正则expression式分步debugging器。 当然还有其他的。


解决scheme2(工作方便,但你需要安装一个扩展)

视觉事件

在这里输入图像说明

个人喜欢。 它奇妙地工作,但它是一个扩展,它不使用Chrome的开发工具。 只是供参考。


解决scheme3(痛苦但容易的一种)

  1. 打开开发工具 – >源选项卡,并在右侧findEvent Listener Breakpoints

    在这里输入图像说明

  2. 展开Mouse ,然后单击…以及click

  3. 现在点击元素(执行应该暂停),在这里开始游戏:开始按F11 (这是步入 )来通过所有的代码。 坐好,可以有一吨的跳跃。
  4. 可能会有很多你不想/需要拖拽自己的脚本,所以把它与上面描述的方法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的数据方法 。

  1. 打开Chrome的控制台(尽pipe任何浏览器加载jQuery将工作)
  2. 运行$._data($(".example").get(0), "events")
  3. 深入查看输出以查找所需的事件处理程序。
  4. 右键单击“处理程序”并select“显示function定义”
  5. 代码将显示在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');

  • jQuery事件:检测对div的html /文本的更改
  • 我如何使用JQuery来检查一个div是否一直滚动到底部?
  • 加载脚本后调用javascript函数
  • Facebook风格的JQuery自动完成插件
  • 如何在调整浏览器大小时自动alignmentjQuery UI对话框?
  • 运行ScrollTop以ID为单位的偏移量
  • 仅在指定字符的第一个实例上拆分string
  • 如何在JavaScript中打印部分呈现的HTML页面?
  • jQuery函数不绑定到新添加的dom元素
  • 在“Levenshtein距离”中用Javascript中的最佳性能对数组进行sorting
  • debugging通过jQuery getScript函数添加的脚本