Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
468 views
in Technique[技术] by (71.8m points)

javascript - 如何使用开发人员工具查找Chrome中的按钮或元素运行的代码(How to find what code is run by a button or element in Chrome using Developer Tools)

I'm using Chrome and my own website.

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

What I know from the inside:(我从内部知道:)

1 ) I have a form where people sign up by clicking this orange image-button:

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

在此处输入图片说明

2 ) I inspect it, and this is all it is: <img class="formSend" src="images/botoninscribirse2.png">

(2 )我检查了它,这就是全部了: <img class="formSend" src="images/botoninscribirse2.png">)

3 ) At the top of the source code, there are tons of script sources.

(3 )在源代码的顶部,有大量的脚本源。)

I know which one the button calls because I coded it: <script src="js/jquery2.js" type="text/javascript"></script>

(我知道按钮调用了哪个按钮,因为我对其进行了编码: <script src="js/jquery2.js" type="text/javascript"></script>)

4 ) Within that file, you could find: $(".formSend").click(function() { ... });

(4 )在该文件中,您可以找到: $(".formSend").click(function() { ... });)

which is what is triggered by the button (to do a fairly complex form validation and submit) and what I want is to be able to find that using chrome dev tools on any website.

(这是由按钮(进行相当复杂的表单验证和提交)触发的,而我想要的是能够在任何网站上使用chrome dev工具找到该按钮 。)

How can I find out where does the element call?(我如何找出元素在哪里调用?)

Listeners tab didn't work for me.

(听众标签对我不起作用。)

So then I tried looking the click event listeners, which seemed like a safe bet to me but... there's no jquery2.js in there (and I wouldn't really know which file the code is so I'd waste time checking all these...):

(因此,然后我尝试查找单击事件侦听器,这对我来说似乎是一个安全的选择,但是...那里没有jquery2.js (而且我真的不知道代码是哪个文件,因此我浪费时间检查所有文件这些...):)

在此处输入图片说明

My $(".formSend").click(function() { ... });

(我的$(".formSend").click(function() { ... });)

function within jquery2.js file is not there.

(jquery2.js文件中的函数不存在。)

Jesse explains why :

(杰西解释了原因 :)

"Finally, the reason why your function is not directly bound to the click event handler is because jQuery returns a function that gets bound. jQuery's function, in turn, goes through some abstraction layers and checks, and somewhere in there, it executes your function."

(“最后,您的函数未直接绑定到click事件处理程序的原因是因为jQuery返回了被绑定的函数。jQuery的函数又经过一些抽象层并进行检查,然后在其中的某个地方执行您的函数”。)


As suggested by some of you I've collected the methods that worked in one answer down below .

(正如某些人所建议的,我在下面的一个答案中收集了有效的方法。)

  ask by Carles Alcolea translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to reply this article.

OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...