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

Question

我正在使用 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 开发工具找到它。

如何找出元素调用的位置？

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

我的$(".formSend").click(function() { ... }); jquery2.js 内的函数文件不存在。

Jesse解释为什么:

"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."

---

根据你们中的一些人的建议，我收集了有效的方法 in one answer down below .

Answer 1

Alexander Pavlov's answer得到最接近你想要的。

由于 jQuery 的抽象性和功能性的广泛性，必须跳很多圈才能进入事件的核心。我已经设置了这个jsFiddle展示作品。

---

1。设置事件监听器断点

你很接近这个。

1. 打开 Chrome 开发工具 (F12)，然后转到“源”标签。
2. 向下钻取到鼠标 -> 点击
   
   (点击放大)

---

2。点击按钮!

Chrome 开发工具将暂停脚本执行，并为您呈现这种美丽纠缠的缩小代码:

(点击放大)

---

3。找到辉煌的代码!

现在，这里的诀窍是不要忘乎所以按键，并留意屏幕。

1. 按 F11 键(Step In)直到出现所需的源代码
2. 源代码终于到了
   • 在jsFiddle上面提供的示例，我必须按 F11 108 次 才能到达所需的事件处理程序/函数
   • 根据用于绑定(bind)事件的 jQuery(或框架库)的版本，您的里程可能会有所不同
   • 只要有足够的投入和时间，您就可以找到任何事件处理程序/函数

---

4。说明

我没有确切的答案，也没有解释为什么 jQuery 会经历它所做的许多抽象层——我只能建议这是因为它所做的工作是从浏览器中抽象出它的使用执行代码。

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

    // ...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 answer解释差异。

最后，你的函数不直接绑定(bind)到click事件处理程序的原因是因为jQuery返回一个被绑定(bind)的函数。 jQuery 的函数依次经过一些抽象层和检查，并在 某处 那里执行您的函数。