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

2020/10/31 18:32 · jquery ·  · 0评论

我正在使用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. 深入到鼠标->单击(单击以放大)
    Chrome开发工具->“源”标签->鼠标->单击

2.点击按钮!

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

Chrome Dev Tools暂停了脚本执行
(点击放大)


3.找到光荣的代码!

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

  1. F11键(步骤在),直到所希望的源代码出现
  2. 源代码终于到了

    • 上面提供jsFiddle示例中,我必须按F11 108次才能达到所需的事件处理程序/函数
    • Your mileage may vary, depending on the version of jQuery (or framework library) used to bind the events
    • With enough dedication and time, you can find any event handler/function

所需的事件处理程序/功能


4. Explanation

I don't have the exact answer, or explanation as to why jQuery goes through the many layers of abstractions it does - all I can suggest is that it is because of the job it does to abstract away its usage from the browser executing the code.

Here is a jsFiddle with a debug version of jQuery (i.e., not minified). When you look at the code on the first (non-minified) breakpoint, you can see that the code is handling many things:

    // ...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)。在左侧找到一个名为“黑匣子的标签

在此处输入图片说明

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

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

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

在此处输入图片说明

解决方案2:视觉事件

在此处输入图片说明

这是一个出色的工具

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

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

解决方案3:调试

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

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

  1. 打开Dev Tools-> Sources选项卡,然后在右侧找到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');

本文地址:http://jquery.askforanswer.com/ruheshiyongkaifarenyuangongjuchazhaochromezhongdeanniuhuoyuansuyunxingdedaima.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!