如何使用开发人员工具查找Chrome中按钮/元素运行的代码-Java 学习之路

254

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

我从内部了解到：

1 ）我有一个表单，人们通过单击此橙色图像按钮注册：

enter image description here

2 ）我检查了一下，就是这样： <img class="formSend" src="images/botoninscribirse2.png">

3 ）在源代码的顶部，有大量的脚本源 . Of course, I know which one the button calls, I coded it ： <script src="js/jquery2.js" type="text/javascript"></script>

4 ）在该文件中，您可以找到： $(".formSend").click(function() { ... }); 这是由按钮触发的内容（进行相当复杂的表单验证和提交）和 what I want is to be able to find that 使用任何网站上的chrome dev工具 .

我们怎样才能找出元素所在的位置？

听众选项卡对我不起作用

那么我试着查看点击事件监听器，这对我来说似乎是一个安全的赌注但是...那里没有 jquery2.js （我不会浪费时间检查所有这些......）：

enter image description here

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

Jesse解释 why down in his answer：

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

EDIT: 我已按照你们中的一些人的建议，收集了这个问题出现的所有方法in one answer down below .

5 回答

172
此解决方案需要jQuery's data method .
- 打开Chrome控制台（虽然任何装有jQuery的浏览器都可以使用）
- 运行 $._data($(".example").get(0), "events")
- 深入查看输出以查找所需的事件处理程序 .
- 右键单击"handler"并选择"Show function definition"
- 代码将显示在“源”选项卡中
$._data() 只是访问jQuery的数据方法 . 更可读的替代方案可能是 jQuery._data() .

有趣的一点this SO answer：

从jQuery 1.8开始，数据的“公共API”不再提供事件数据 . 阅读这篇jQuery博客文章 . 你现在应该使用它：jQuery._data（elem，“events”）; elem应该是HTML元素，而不是jQuery对象或选择器 . 请注意，这是一个内部的“私人”结构，不应修改 . 仅用于调试目的 . 在旧版本的jQuery中，您可能必须使用旧方法：jQuery（elem）.data（“events”）;

与版本无关的jQuery将是： (jQuery._data || jQuery.data)(elem, 'events');
回复于 2024-05-04T20:08:23+08:00
14
你可以用 findHandlersJS

您可以在chrome控制台中找到处理程序：

findEventHandlers("click", "img.envio")

您将在chrome的控制台中打印以下信息：
- 元素
  注册事件处理程序的实际元素
- 事件
  包含有关我们感兴趣的事件类型的jquery事件处理程序的信息的数组（例如，单击，更改等）
- 处理程序
  通过右键单击并选择显示函数定义可以看到的实际事件处理程序方法
- 选择器
  选择器为委派事件提供 . 对于直接事件，它将是空的 .
- 目标
  列出此事件处理程序所针对的元素 . 例如，对于在文档对象中注册并且定位页面中所有按钮的委托事件处理程序，此属性将列出页面中的所有按钮 . 您可以悬停它们并在Chrome中突出显示它们 .
更多信息here，你可以在这个示例网站here中尝试 .
回复于 2024-05-04T20:08:23+08:00
6
Alexander Pavlov's answer最接近你想要的 .

由于jQuery的抽象和功能的广泛性，必须跳出很多篮球才能获得事件的重要性 . 我已经设置了这个jsFiddle来展示这项工作 .

1.设置事件侦听器断点

你很接近这个 .
- 打开Chrome开发工具（F12），然后转到“来源”选项卡 .
- 深入查看鼠标 - >单击
（点击放大）

2.点击按钮！

Chrome Dev Tools将暂停脚本执行，并为您呈现这种美妙的缩小代码纠缠：

（点击放大）

3.找到光荣的代码！

现在，这里的诀窍是 not get carried away 按下键，并留意屏幕 .
- 按F11键（Step In）直到出现所需的源代码
- 源代码终于到了
- 在上面提供的jsFiddle示例中，我必须在到达所需的事件处理程序/函数之前按F11 108 times
- 您的里程可能会有所不同，具体取决于用于绑定事件的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...
```
我认为你错过了它的原因是“执行暂停并且我逐行跳过", is because you may have used the " Step Over”功能，而不是Step In . 这是一个解释差异的StackOverflow answer .

最后，你的函数没有直接绑定到click事件处理程序的原因是因为jQuery返回一个被绑定的函数 . jQuery的函数依次经过一些抽象层和检查，在那里的某个地方执行你的函数 .
回复于 2024-05-04T20:08:23+08:00
133

听起来像"...and I jump line by line..."部分是错误的 . 你是StepOver还是StepIn，你确定你不小心错过了相关的电话吗？

也就是说，出于这个原因，调试框架可能很乏味 . 为了缓解这个问题，你可以enable the "Enable frameworks debugging support" experiment . 快乐的调试！ :)

回复于 2024-05-04T20:08:23+08:00
3
以下是一些解决方案：

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

框架黑盒子：
- 弹出Chrome开发者工具（F12或⌘⌥i）并进入设置（右上角或F1）
- 就在那里，你会发现左边有一个名为“ Blackboxing ”的标签
- 这是您放置要避免通过的文件的 RegEx 模式的位置 . 例如： jquery\..*\.js （人类翻译： jquery.*.js ）
- 如果要使用 multiple patterns 跳过文件，可以使用管道字符添加它们，如下所示： jquery\..*\.js|include\.postload\.js . 或者只是使用"Add"按钮添加它们 .
- 现在应用下面描述的解决方案3 .
更多相关信息：https：//developer.chrome.com/devtools/docs/blackboxing额外提示：我使用Regex101快速测试生锈的正则表达式模式，并找出我的正则表达式错误的步骤调试器 . 当然还有其他人 .

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

Visual Event：

Personal favourite. 它运行得非常好，但它没有使用Chrome的开发人员工具 . 仅供参考 .

解决方案3（有点痛苦但容易）
- 打开开发工具 - >源选项卡，右侧找到 Event Listener Breakpoints ：
- 展开 Mouse 并点击......好， click .
- 现在点击元素（执行应该暂停）并在这里开始游戏：只需开始按F11（这是步入）来浏览所有代码 . 坐下，可以有一个 ton of jumps.
- 可能会有很多你不想要/不需要拖动自己的脚本，所以将它与上面描述的方法1结合起来 .
解决方案4（生存模式）

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

但要注意，有时候不仅有 img 而是 divs 重叠，你可以't even know what triggers the code. You probably shouldn' t必须使用这种方法 .
回复于 2024-05-04T20:08:23+08:00