假设我的页面上有一个链接:
<a href="#" id="foo">Click Here</a>
我什么都不知道,但是当我单击链接时,alert("bar")
会显示一个。因此,我知道某个地方已经绑定了一些代码#foo
。
如何找到alert("bar")
将click事件绑定到的代码?我正在寻找Chrome的解决方案。
附注:这个例子是虚构的,所以我没有在寻找类似的解决方案:“使用XXXXXX并在整个项目中搜索“ alert(\“ bar \”)”。我想要一个真正的调试/跟踪解决方案。
使用Chrome 15.0.865.0开发版。在“元素”面板上有一个“事件侦听器”部分:
在“脚本”面板上还有一个“事件侦听器断点”。使用鼠标->单击断点,然后“进入下一个函数调用”,同时密切注意调用堆栈,以查看哪个userland函数处理该事件。理想情况下,你会用unminified一个替代的jQuery的精缩版,这样你就不必一步所有的时间和使用步过在可能的情况。
您还可以使用Chrome的检查器以另一种方式查找附加事件,如下所示:
- 右键单击要检查的元素,或在“元素”窗格中找到它。
- 然后在“事件监听器”选项卡/窗格中,展开事件(例如,“单击”)
- 展开各个子节点以查找所需的子节点,然后查找“ handler”子节点的位置。
- 右键单击“功能”一词,然后单击“显示功能定义”
这将带您到定义处理程序的位置,如下图所示,并由Paul Irish在此处进行解释:https : //groups.google.com/forum/#!topic/google- chrome-developer-tools/ NTcIS15uigA
安装后,请尝试使用jQuery Audit扩展(https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg):
- 检查元素
- 在新的“ jQuery Audit ”选项卡上,展开“事件”属性
- 选择您需要的活动
- 在处理程序属性中,右键单击功能,然后选择“显示功能定义”
- 您现在将看到事件绑定代码
- 单击“ Pretty print ”按钮以更清晰地查看代码
(截止到2020年)对于Chrome版本83.0.4103.61:
-
选择要检查的元素
-
选择“事件侦听器”选项卡
-
确保检查Framework侦听器以显示真实的javascript文件而不是jquery函数。
编辑:代替我自己的答案,这是一个非常好的:如何使用Firebug(或类似工具)调试JavaScript / jQuery事件绑定
Google Chromes开发人员工具的脚本部分内置了搜索功能
如果您不熟悉此工具:(以防万一)
- 右键单击页面上的任意位置(Chrome浏览器)
- 点击“检查元素”
- 点击“脚本”标签
- 右上方的搜索栏
快速搜索#ID应该最终将您带到绑定功能。
例如:搜寻#foo
会带您前往
$('#foo').click(function(){ alert('bar'); })
2018年更新-可能对将来的读者有所帮助:
我不确定这是最初在Chrome中引入的。但是现在可以在Chrome中完成此操作的另一种(简便)方法是通过控制台命令。
例如:(在铬控制台类型)
getEventListeners($0)
而$ 0是DOM中的选定元素。
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
findEventHandlers是一个jquery插件,原始代码在这里:https ://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
脚步
-
将原始代码直接粘贴到chrome的控制台中(注意:必须已加载jquery)
-
使用以下函数调用:
findEventHandlers(eventType, selector);
查找对应的选择器,指定元素的eventType处理程序。
范例:
findEventHandlers("click", "#clickThis");
然后,如果有的话,可用的事件处理程序将显示以下消息,您需要展开以找到该处理程序,右键单击该函数并选择 show function definition
参见:https : //blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
对于Chrome版本52.0.2743.116:
-
在Chrome的开发人员工具中,点击
Ctrl
+Shift
+调出“搜索”面板F
。 -
输入您要查找的元素的名称。
绑定元素的结果应显示在面板中,并说明其所在的文件。
文章标签:debugging , dom-events , google-chrome , inspector , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!