我正在使用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.设置事件监听器断点
您已经接近这一点了。
2.点击按钮!
Chrome开发者工具将暂停脚本执行,并向您展示这些精巧的压缩代码:
3.找到光荣的代码!
现在,这里的窍门是不要被按下键所困扰,并且要注意屏幕。
- 按F11键(步骤在),直到所希望的源代码出现
- 源代码终于到了
- 在上面提供的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的文档:
将脚本黑名单时会发生什么?
从库代码抛出的异常不会暂停(如果启用了“暂停暂停”功能),进入/退出/跳过会跳过库代码,事件侦听器断点不会在库代码中中断,调试器不会在库中设置的任何断点处暂停码。最终结果是您正在调试应用程序代码,而不是第三方资源。
这是更新的工作流程:
- 弹出打开的Chrome开发者工具(F12或⌘+ ⌥+ i),转到设置(右上或F1)。在左侧找到一个名为“黑匣子”的标签
- 在这里,您可以放置要让Chrome在调试时忽略的文件的RegEx模式。例如:
jquery\..*\.js
(glob模式/人类翻译:jquery.*.js
) - 如果要跳过具有多个模式的文件,则可以使用竖线字符来添加文件
|
,如下所示:(可以说jquery\..*\.js|include\.postload\.js
,它的作用类似于“或该模式”。或者继续使用“添加”按钮添加文件。 - 现在继续下面介绍的解决方案3。
奖金提示!我经常使用Regex101(但还有许多其他功能:)来快速测试我生锈的regex模式,并通过逐步的regex调试器找出我的问题所在。如果您尚不熟练使用正则表达式,建议您开始使用可帮助您编写和可视化它们的网站,例如http://buildregex.com/和https://www.debuggex.com/
在“源”面板中工作时,也可以使用上下文菜单。查看文件时,可以右键单击编辑器,然后选择“黑盒脚本”。这会将文件添加到“设置”面板中的列表中:
解决方案2:视觉事件
Visual Event是开放源代码的Javascript小书签,它提供有关已附加到DOM元素的事件的调试信息。视觉事件显示:
- 哪些元素附有事件
- 附加到元素的事件类型
- 触发将与事件一起运行的代码
- 定义附加功能的源文件和行号(仅Webkit浏览器和Opera)
解决方案3:调试
当您单击页面中的某个位置或修改DOM时,可以暂停代码...以及其他有用的JS断点。您应该在此处应用黑匣子,以避免发生噩梦。
在这种情况下,我想知道单击按钮时到底发生了什么。
-
打开Dev Tools-> Sources选项卡,然后在右侧找到
Event
:
Listener Breakpoints -
展开
Mouse
并选择click
- 现在单击该元素(执行应暂停),然后您正在调试代码。您可以按一下所有代码F11(这是“步入”)。或者返回堆栈中的一些跳转。可能会有很多跳跃
解决方案4:钓鱼关键字
随着开发工具激活,就可以搜索整个代码库(在所有文件中的所有代码)与⌘+ ⌥+F或:
并搜索#envio
或您认为可以启动聚会的任何标签/类/标识,您可能会比预期的更快到达目的地。
请注意,有时不仅有img
很多元素堆叠在一起,而且您可能不知道哪个元素触发了代码。
如果您不了解这一点,请查看Chrome的调试教程。
听起来像“ ...我逐行跳起来...”部分是错误的。您是StepOver还是StepIn,确定不会意外错过相关通话吗?
也就是说,正是由于这个原因,调试框架可能很乏味。要缓解此问题,可以启用“启用框架调试支持”实验。调试愉快!:)
您可以使用findHandlersJS
您可以在chrome控制台中找到处理程序:
findEventHandlers("click", "img.envio")
您将在chrome的控制台中获得以下信息:
- 元素
在其中注册了事件处理程序的实际元素 - events
数组,其中包含有关我们感兴趣的事件类型(例如,单击,更改等)的jquery事件处理程序的信息 - 处理
实际事件处理方法,你可以通过右击它并选择显示函数定义见 - 选择
器为委托事件提供的选择器。对于直接事件,它将为空。 - 目标
列出此事件处理程序目标的元素。例如,对于在文档对象中注册并针对页面中所有按钮的委托事件处理程序,此属性将列出页面中的所有按钮。您可以将鼠标悬停在chrome上。
此解决方案需要jQuery的data方法。
- 打开Chrome的控制台(尽管任何装有jQuery的浏览器都可以使用)
- 跑
$._data($(".example").get(0), "events")
- 向下钻取输出以找到所需的事件处理程序。
- 右键单击“处理程序”,然后选择“显示功能定义”
- 该代码将显示在“源”选项卡中
$._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');
文章标签:google-chrome , google-chrome-devtools , javascript , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!