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

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

我从内部了解到： 1）我有一个表单，人们可以通过单击此橙色图像按钮进行注册：

2）我检查了一下，就这些：

3）在源代码的顶部，有大量的脚本源代码。我知道按钮调用的是哪一个，因为我对它进行了编码：

4在该文件中，您可以找到：

$（“.formSend”）。单击（function（）{…}）

这是由按钮触发的（执行相当复杂的表单验证和提交），而我想要的是能够在任何网站上使用chrome开发工具找到它

如何找出元素调用的位置？ “侦听器”选项卡对我不起作用。然后我试着寻找点击事件的监听器，这对我来说似乎是一个安全的赌注，但是。。。那里没有

jquery2.js

（我也不知道代码是哪个文件，所以我会浪费时间检查所有这些…）：

My

$（“.formSend”）。单击（函数（）{…}）jquery2.js

文件中的code>函数不存在

解释原因：

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

---

正如你们中的一些人所建议的，我已经收集了有效的方法。

听起来像“…我一行一行地跳转…”部分是错误的。您是否中途或中途介入，并且您确定不会意外错过相关电话

也就是说，正是由于这个原因，调试框架可能会很乏味。为了缓解这个问题，你可以。调试愉快！：）

您可以使用

您可以通过在chrome控制台中执行以下操作来找到处理程序：

findEventHandler（“单击”、“img.envio”）

您将在chrome的控制台中打印以下信息：

• 元素
  事件处理程序在其中注册的实际元素
• 事件
  数组，其中包含我们感兴趣的事件类型的jquery事件处理程序信息（例如单击、更改等）
• 处理程序
  通过右键单击并选择ShowFunctionDefinition可以看到的实际事件处理程序方法
• 选择器
  为委派事件提供的选择器。对于直接事件，它将为空
• 目标
  列出此事件处理程序所针对的元素。例如，对于在文档对象中注册并以页面中的所有按钮为目标的委托事件处理程序，此属性将列出页面中的所有按钮。您可以将其悬停并在chrome中看到它们高亮显示

更多信息，您可以在此示例站点中尝试。

获取最接近您所需的信息

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

---

1.设置事件侦听器断点 你就差一点了

打开Chrome开发工具（F12），然后转到Sources选项卡

向下搜索到鼠标->单击

（单击以缩放）

---

2.点击按钮！ Chrome Dev工具将暂停脚本执行，并向您展示这一小型化代码的美丽纠结：

（单击以缩放）

---

3.找到光荣的密码！ 现在，这里的诀窍是不要忘乎所以按下键，并密切关注屏幕

按F11键（步进），直到出现所需的源代码

源代码最终到达

• 在上面提供的示例中，在到达所需的事件处理程序/函数之前，我必须按F11108次
• 根据用于绑定事件的jQuery（或框架库）的版本，您的里程可能会有所不同
• 有了足够的投入和时间，您可以找到任何事件处理程序/函数

---

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

下面是一个带有jQuery调试版本的示例（即，未缩小）。当您在第一个（非缩小）断点上查看代码时，您可以看到代码正在处理许多事情：

/…剪断。。。
if（！（eventHandle=elemData.handle））{
eventHandle=elemData.handle=function（e）{
//放弃jQuery.event.trigger（）的第二个事件，然后
//在页面卸载后调用事件时
返回jQuery的类型！==strundefined&&jQuery.event.triggered！==e.type？
jQuery.event.dispatch.apply（元素，参数）：未定义；
};
}
//…剪断。。。

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

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

解决方案1：框架黑盒 工程伟大，最低限度的设置和没有第三方

根据：

黑盒脚本时会发生什么

从库代码引发的异常将不会暂停（如果暂停打开 启用异常），单步进/出/越过将绕过库