如何使用开发人员工具在Chrome中找到按钮/元素运行的代码

我使用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开发工具。

我们如何找出元素在哪里调用？

---

听众选项卡不适合我

所以然后我试着寻找点击事件监听器，这对我来说似乎是一个安全的赌注，但是......里面没有jquery2.js （并且我真的不知道代码是哪个文件，所以我会浪费时间检查所有这些...）：

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

杰西在他的回答中解释了为什么 ：

“最后，为什么你的函数没有直接绑定到click事件处理程序，是因为jQuery返回了一个被绑定的函数，jQuery的函数依次通过一些抽象层和检查，并在那里执行你的函数。

编辑：我收集了这个问题的所有方法出现在下面的一个答案，正如你们中的一些人所建议的。

---

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

由于jQuery抽象和功能的广泛性，为了了解事件的真相，必须跳过很多圈。 我已经建立了这个jsFiddle来展示这项工作。

---

1.设置事件监听器断点

你靠近这个。

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

深入鼠标 - >点击

（点击放大）

---

2.点击按钮！

Chrome开发工具将暂停脚本执行，并向您展示这个美丽的缩小代码纠缠：

（点击放大）

---

3.找到辉煌的代码！

现在，这里的诀窍是不要按下按键，并留意屏幕。

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

源代码终于达成了

在上面提供的jsFiddle示例中，我必须在达到所需的事件处理程序/函数之前按F11 108次

您的里程可能会有所不同，具体取决于用于绑定事件的jQuery（或框架库）的版本

有了足够的奉献精神和时间，你可以找到任何事件处理程序/功能

---

4.说明

我没有确切的答案，也没有解释为什么jQuery要经历它的许多抽象层 - 我可以建议的是，这是因为它的工作是将它的用法从执行代码的浏览器中抽象出来。

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

    // ...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答案。

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

---

以下是一些解决方案：

---

解决方案1（效果很好，只是一些设置，但没有第三方）

框架黑箱化：

打开Chrome开发者工具（F12或⌘+⌥+ i）并转到设置（右上方或F1）

就在那里，你会在左边看到一个名为“ Blackboxing ”的标签

这就是您要避免通过的文件的RegEx模式。 例如： jquery..*.js （人工翻译： jquery.*.js ）

如果您想跳过具有多种模式的文件，可以使用管道字符来添加它们，如下所示： jquery..*.js|include.postload.js 。 或者继续使用“添加”按钮添加它们。

现在应用下面描述的解决方案3。

更多关于这个 ：https：//developer.chrome.com/devtools/docs/blackboxing

奖金提示 ：我使用Regex101来快速测试我的生锈的正则表达式模式，并找出我在正则表达式分步调试器中出错的地方。 当然还有其他的。

---

解决方案2（工作方便，但您需要安装扩展程序）

视觉事件 ：

个人喜爱。 它的功能非常好，但它是一个扩展，它不使用Chrome的开发工具。 只是FYI。

---

解决方案3（一种痛苦但容易）

打开开发工具 - >源选项卡，并在右侧找到Event Listener Breakpoints ：

展开Mouse并单击...以及click 。

现在点击元素（执行应该暂停），然后开始游戏：刚开始按F11（即Step in）来遍历所有代码。 请坐，可能会出现很多跳跃。

可能会有很多你不想/需要拖拽自己的脚本，所以将它与上面描述的方法1结合起来。

---

解决方案4（生存模式）

我总是用Ctr + Shift + F（所有来源的文本搜索）和搜索#envio或任何你认为开始派对的标签/标识#envio ，阅读所有发现以试图找出可以运行的代码，感觉是失败者并且觉得必须有一种安全的方式来真正了解按钮触发了什么。

但要知道，有时有不仅是img但吨divs重叠，你可以不知道什么触发的代码。 你可能不应该使用这种方法。

---

听起来像“......并且我一行一行地跳......”部分是错误的。 你是StepOver还是StepIn，你确定你不会错过相关的电话吗？

也就是说，调试框架由于这个原因可能很乏味。 为了缓解这个问题，你可以启用“启用框架调试支持”实验。 快乐调试！ :)

链接地址: http://www.djcxy.com/p/71691.html

上一篇: How to find what code is run by a button/element in Chrome using Developer Tools

下一篇: Avoiding exceeding call stack size in Node.JS with Mongoose