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

我正在使用Chrome和我自己的网站

我从内部了解到:

1)我有一个表单,人们可以通过单击此橙色图像按钮进行注册:

2)我检查了一下,就这些:
<img类=“img类”;formSend“;src=”s;images/botoninscribirse2.png“&燃气轮机

3)在源代码的顶部,有大量的脚本源代码。我知道按钮调用的是哪一个,因为我对它进行了编码:<脚本src="js/jquery2.js“;类型="text/javascript“&燃气轮机&lt/脚本&gt

4)在该文件中,您可以找到:$(".formSend")。单击(function(){…})这是由按钮触发的(执行相当复杂的表单验证和提交),而我想要的是能够在任何网站上使用chrome开发工具找到它

如何找出元素调用的位置

“侦听器”选项卡对我不起作用。然后我试着寻找点击事件的监听器,这对我来说似乎是一个安全的赌注,但是。。。那里没有jquery2.js(我也不知道代码是哪个文件,所以我会浪费时间检查所有这些…):

My$(“formSend”)。单击(函数(){…})</jquery2.js文件中的code>函数不存在

杰西解释了原因:

”;最后,函数没有直接绑定到click事件处理程序的原因是jQuery返回一个绑定的函数。jQuery的函数依次经过一些抽象层和检查,然后在其中的某个地方执行您的函数


正如你们中的一些人所建议的,我已经在下面的一个答案中收集了有效的方法

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

由于jQuery的抽象和功能的广泛性,为了抓住事件的实质,必须跳出许多障碍。我已经设置了这个JSFIDLE来演示这项工作


一,。设置事件侦听器断点

你就差一点了

  1. 打开Chrome开发工具(F12),然后转到Sources选项卡
  2. 向下搜索到鼠标->单击

    (单击以缩放)


二,。点击按钮

Chrome Dev工具将暂停脚本执行,并向您展示这一小型化代码的美丽纠结:

(单击可缩放)


三,。找到光荣的密码

现在,这里的诀窍是不要忘乎所以按下键,并密切关注屏幕

  1. 按F11键(单步执行),直到出现所需的源代码
  2. 源代码最终到达
    • 在上面提供的JSFIDLE示例中,在到达所需的事件处理程序/函数之前,我必须按F11108次
    • 根据用于绑定事件的jQuery(或框架库)的版本,您的里程可能会有所不同
    • 只要投入足够的精力和时间,您就可以找到任何事件处理程序/函数

四,。解释

我没有确切的答案,也没有解释为什么jQuery会经历许多层的抽象——我只能说,这是因为它从执行代码的浏览器中抽象出了它的用法

这里是一个带有jQuery调试版本的JSFIDLE(即,未缩小)。当您在第一个(非缩小)断点上查看代码时,您可以看到代码正在处理许多事情:

/…剪贴。。。
if(!(eventHandle=elemData.handle)){
eventHandle=elemData.handle=function(e){
//放弃jQuery.event.trigger()的第二个事件,然后
//在页面卸载后调用事件时
返回jQuery的类型!==strundefined&amp;jQuery.event.triggered!==e.type?
jQuery.event.dispatch.apply(元素,参数):未定义;
};
}
//…剪断。。。

当“执行暂停且我逐行跳转时,”,我认为您在尝试时错过了它的原因是因为您可能使用了“跳过”功能,而不是介入。下面是一个解释差异的答案

最后,函数没有直接绑定到click事件处理程序的原因是jQuery返回一个绑定的函数。jQuery的函数依次经过一些抽象层和检查,然后在其中的某个地方执行函数

发表评论