如何使用开发人员工具查找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文件中的功能不存在.

杰西在他的回答中解释了为什么 :

"最后,你的函数没有直接绑定到click事件处理程序的原因是因为jQuery返回一个被绑定的函数.jQuery的函数依次通过一些抽象层和检查,在那里的某个地方,它执行你的函数."

编辑:我已经按照你们中的一些人的建议,在下面的一个答案中收集了这个问题产生的所有方法.

Answer 1

亚历山大·巴甫洛夫的回答与你想要的最接近.

由于jQuery的抽象和功能的广泛性,必须跳出许多篮球以便了解事件的内容.我已经设置了这个jsFiddle来演示这项工作.

1.设置事件侦听器断点

你很接近这个.

1. 打开Chrome开发工具(F12),然后转到"来源"选项卡.
2. 深入查看鼠标 - >单击
   
   (点击放大)

2.单击按钮!

Chrome开发工具将暂停脚本执行,并向您展示这种美妙的缩小代码纠缠:

(点击放大)

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答案.

最后,你的函数没有直接绑定到click事件处理程序的原因是因为jQuery返回一个被绑定的函数.jQuery的函数依次通过一些抽象层和检查,在那里的某个地方执行你的函数.

Answer 2

解决方案1:框架黑盒子

效果很好,只是一点设置,但没有第三方.

编辑:自编写此解决方案以来,Chrome(以及其他浏览器,我也确定)使黑盒子脚本变得更容易.

根据Chrome的文档:

blackbox脚本会发生什么？

从库代码抛出的异常不会暂停(如果启用了Pause on exceptions),则进入/退出/覆盖库代码,事件监听器断点不会在库代码中断,调试器不会在库中设置的任何断点上暂停码.最终结果是您正在调试应用程序代码而不是第三方资源.

这是更新的工作流程:

1. 弹出Chrome开发者工具(F12或⌘+ ⌥+ i),转到设置(右上角或F1).在左侧找到一个名为" Blackboxing " 的标签

2. 这就是您放置要避免通过的文件的RegEx模式的位置.例如:jquery\..*\.js(人译:jquery.*.js)
3. 如果要跳过具有多个模式的文件,可以使用管道字符添加它们,如下所示:|.或者只需使用"添加"按钮添加它们.
4. 现在应用下面描述的解决方案3.

额外提示:我使用Regex101(但还有很多其他的)来快速测试我生锈的正则表达式模式,并找出我的正则表达式逐步调试器的错误.

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

解决方案2:视觉事件

这是一个很好的工具.

解决方案3:完成代码

这种痛苦但很容易(黑盒子在这里证明非常有用).

1. 打开开发工具 - >源选项卡,右边找到jquery\..*\.js|include\.postload\.js:

   

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

3. 现在点击元素(执行应该暂停)并在这里启动游戏:只需开始按F11(这是步入)来浏览所有代码.坐得紧,可以有很多跳跃.

解决方案4:生存模式

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

并且搜索click或者你认为开始派对的标签/类/ id,阅读所有发现以试图找出可以运行的代码,感觉失败并且感觉必须是一种安全的方式来真正了解什么是由按钮.

但请注意,有时不仅会有#envio大量的img重叠,而且甚至无法知道是什么触发了代码.您可能不应该使用此方法.

Answer 3

听起来像"......我一行一行......"部分是错误的.你是StepOver还是StepIn,你确定你不小心错过了相关的电话吗？

也就是说,出于这个原因,调试框架可能很乏味.要解决此问题,可以启用"启用框架调试支持"实验.快乐的调试!:)

Answer 4

您可以使用findHandlersJS

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

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

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

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

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