Javascript 有没有办法知道事件正在调用哪个函数?
每隔一段时间,我就会有一些大型jQuery事件处理程序,比如:-Javascript 有没有办法知道事件正在调用哪个函数?,javascript,jquery,debugging,google-chrome-devtools,firefox-developer-tools,Javascript,Jquery,Debugging,Google Chrome Devtools,Firefox Developer Tools,每隔一段时间,我就会有一些大型jQuery事件处理程序,比如:- $(document).on("click",".some-class", function(){ //perform some action }); 附加到我的页面上的元素的。如果我的页面上几乎没有事件处理程序,那么这没有问题,但是在一个大型应用程序上调试这些事件处理程序可能是一件非常麻烦的事情。我不知道在某些事件中调用哪个回调 所以,我的问题是,在开发工具中是否有任何选项或技巧可以知道调用了哪些函数 它不一定是开发工
$(document).on("click",".some-class", function(){
//perform some action
});
附加到我的页面上的元素的。如果我的页面上几乎没有事件处理程序,那么这没有问题,但是在一个大型应用程序上调试这些事件处理程序可能是一件非常麻烦的事情。我不知道在某些事件中调用哪个回调
所以,我的问题是,在开发工具中是否有任何选项或技巧可以知道调用了哪些函数
它不一定是开发工具。它也可以是javascript或jquery技巧
而且,我意识到我可以做
console.log
,调试器
甚至在我的回调函数中加入console.trace()
,但我想知道是否还有更干净、更智能的东西。你可以使用Chrome开发工具Javascript
它将告诉您调用了哪些函数,以及调用了哪些其他函数
虽然我怀疑您会发现
console.log
更简单。已经在这里很多次了,但我建议在每个函数的开头都使用console.log()
。然后看看这在控制台上创建的跟踪。对于拾取不必要地多次触发的事件非常有用
// Your function
function doSomething(event) {
console.log("doSomething(event)", event.currentTarget);
// code for doSomething
}
$('#mybutton').click(doSomething);
所以,我找到了一种方法,让开发工具不用使用任何类型的console.log就可以做到这一点 这就是你要做的(我将谈论Chrome开发工具,但Firefox也应该类似)
- 打开开发工具并转到
源代码面板
- 在您的右侧应该有
,继续并单击鼠标->单击以在单击事件时启用任何断点。(您可以为此选择自己的事件。在这种情况下,我正在执行单击事件)事件侦听器断点
- 如果您的脚本是
和缩小的
,则只需跳过此过程即可。继续并单击要查找函数的元素。它应该触发捆绑的
,您将被带到启用click事件的脚本(在我的例子中通常是jquery,您可能需要执行几步才能进入断点
文件)jquery
- 您的
可能会被jQuery
,但没关系,Chrome开发工具上有一个缩小
(位于美化工具
)源代码面板左下方的{}小按钮
- 现在按
(这会在开发工具上搜索您的函数名)并键入Ctrl+Shift+O
(对我来说,这是所有自定义函数的触发点dispatch
- 现在在while循环的
后面创建一个e.currentTarget
断点(在不同版本的jQuery中可能不同),然后按play/resume
断点(您的断点现在应该跳到此行)
- 现在,只需很少的
步骤(可能更多),就可以转到调用此事件的函数
如果有人有更好的解决方案,我会将答案改为最简单的解决方案。这可能会对您有所帮助!这有点帮助,但在同一个类上有多个事件时并没有指出问题所在。可能重复只是希望有更干净的方法来完成此操作,而无需到处填充日志代码。:/是的,同意。这是一个糟糕的问题,你可以做以下之一:a)运行
window.console={log:function(){}在prod环境中使用code>语句来删除日志,b)在控制台.log
周围创建一个带有包装器的调试器类,并调用它,或者c)使用一个释放时间最小化器,自动剥离对控制台.log
()的所有调用。CPU探查器是我没有想到的。Firefox有一个很好的内置分析器,它甚至会显示一个图表来缩小在什么时候做很多操作的范围。Omg。我找到了最终的解决办法。