如何找到什么代码是由一个按钮或元素在Chrome使用开发工具运行

我使用Chrome浏览器和我自己的网站。

我从内部了解到:

1)我有一个表单，人们通过点击这个橙色的图像按钮来注册:

enter image description here

2)我检查它，这是所有它: <img class="formSend" src="images/botoninscribirse2.png"> < / p >

3.)在源代码的顶部，有大量的脚本源代码。我知道按钮调用的是哪一个，因为我将它编码为<script src="js/jquery2.js" type="text/javascript"></script>

4)在该文件中，你可以找到:$(".formSend").click(function() { ... });，这是由按钮触发的(做一个相当复杂的表单验证和提交)和我想要的是能够找到它，使用chrome开发工具在任何网站上。

我如何才能找到元素调用的位置?

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

enter image description here

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

杰西解释了为什么:

最后，你的函数没有直接绑定到点击事件处理程序的原因是jQuery返回了一个被绑定的函数。jQuery的函数，反过来，经过一些抽象层和检查，在那里，它执行你的函数。

正如你们中的一些人建议的那样，我已经收集了工作在下面的一个答案中的方法。

227245 次浏览
小开

听起来＂...我一行一行地跳……”部分是错误的。你是否StepOver或StepIn，你确定你不会不小心错过相关的调用吗?

也就是说，调试框架正是因为这个原因而变得单调乏味。为了缓解这个问题，你可以启用“启用框架调试支持”实验。调试快乐!：）

小开

你可以使用findHandlersJS

你可以在chrome控制台中找到处理程序:

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

你会得到以下信息打印在chrome的控制台:

    <李>元素< br > 在中注册事件处理程序的实际元素 <李> < br >事件 数组，包含我们感兴趣的事件类型的jquery事件处理程序的信息(例如，单击，更改等) <李>处理< br > 您可以通过右键单击它并选择Show function definition来查看实际的事件处理程序方法 <李>选择< br > 选择器为委托事件提供。对于直接事件，它将为空 <李> < br >目标 带有此事件处理程序目标的元素的列表。例如，对于在文档对象中注册并以页面中的所有按钮为目标的委托事件处理程序，此属性将列出页面中的所有按钮。你可以悬停它们，并在chrome浏览器中高亮显示它们

更多的信息这里<强> < / >强，你可以尝试在这个例子网站这里<强> < / >强。

小开

亚历山大·巴甫洛夫的回答最接近你想要的。

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

1. 设置事件侦听器断点

这次你已经很接近了。

  1. 打开Chrome Dev Tools (F12)，并进入Sources选项卡。
  2. 鼠标下钻->单击“
    ” Chrome Dev Tools ->来源标签->鼠标→点击“></a> < br > <em>(点击放大)</em></li> </ol> <hr> <h2>2. 点击按钮!</h2> <p>Chrome开发工具将暂停脚本执行，并为您呈现这种美丽的最小化代码纠缠:</p> <p><a href=Chrome Dev Tools暂停脚本执行 (点击放大)

    3.找到光荣的代码!

    现在，这里的技巧是不要得意忘形按下键，并保持眼睛在屏幕上。

    1. 按季键(步进)，直到出现所需的源代码
    2. 源代码终于到达
      • 在上面提供的jsFiddle示例中，我必须在到达所需的事件处理程序/函数之前按季 108倍
      • 根据用于绑定事件的jQuery(或框架库)版本的不同，您的里程可能有所不同
      • 如果有足够的时间和精力，你可以找到任何事件处理程序/函数
        • 李< / ul > < / >

    Desired event handler/function

    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回答解释的区别。

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

小开
最佳答案

解决方案1:忽略列表(以前是“黑盒”)

工作很好，最小的设置，没有第三方。文档中说:

当使用Chrome DevTools的Sources面板来逐步通过代码时， 有时您会在不认识的代码上停顿。你可能 暂停在一个Chrome扩展的代码，你已经 安装。使用忽略列表永不暂停扩展代码。

以下是更新后的工作流程:

    打开Chrome开发工具(F12或⌘+⌥+我)，进入设置(右上角，或F1)。在左侧导航/列中选择名为“__abc5”的页面/选项卡;
    • 如果你在调试器中看到太多噪音，你可能想检查Add content scripts to ignore list

enter image description here

  1. 这是你放文件的正则表达式模式，你想Chrome在调试时忽略。例如:jquery\..*\.js (glob pattern/人类 translation: jquery.*.js)
  2. 如果你想用多个模式跳过文件，你可以使用管道字符|来添加它们，就像这样:jquery\..*\.js|include\.postload\.js(可以这么说，它就像一个"或这个模式"。或者用“Add"按钮。
  3. 现在继续下面描述的解决方案3。
我经常使用Regex101(但还有许多其他:)来快速测试我生锈的正则表达式模式，并找出我在哪里用逐步的正则表达式调试器错了。 如果你还不“流利”;在正则表达式中，我建议你开始使用帮助你编写和可视化正则表达式的网站，如http://buildregex.com/和https://www.debuggex.com/

在Sources面板中工作时，您还可以使用上下文菜单。查看文件时，可以在编辑器中右键单击并选择Ignore List。这将把文件添加到设置面板的列表中:

enter image description here


解决方案2:可视事件

enter image description here

这是一个很好的工具:

Visual Event是一个开源的Javascript bookmarklet 调试已附加到DOM的事件的信息 元素。视觉事件显示:

  • 哪些元素附加了事件
  • 附加到元素的事件类型
  • 将与事件一起运行的代码将被触发
  • 定义附加函数的源文件和行号(仅适用于Webkit浏览器和Opera)

解决方案3:调试

您可以在单击页面某处时暂停代码，或者当DOM被修改时…和其他类型的JS断点，这将是有用的。你应该在这里应用黑箱来避免噩梦。

在这个例子中，我想知道当我点击按钮时到底发生了什么。

  1. 打开开发工具->Sources选项卡，在右边找到Event Listener Breakpoints:

    enter image description here

  2. 展开Mouse，选择click

  3. 现在单击元素(执行应该暂停)，现在正在调试代码。你可以按季(即一步)遍历所有代码。或者在堆栈中返回几跳。可以有大量的跳跃


解决方案4:检索关键字

随着开发工具的激活，你可以搜索整个代码库(所有文件中的所有代码)，使用⌘+⌥+F或:

enter image description here

然后搜索#envio或任何你认为可以启动派对的标签/类/id，你可能会比预期更快地到达某个地方。

注意，有时不仅有img，还有很多堆叠的元素，你可能不知道哪一个触发了代码。


如果这有点超出你的知识范围，看看Chrome的调试教程。

小开

这个解决方案需要jQuery的数据方法。

  1. 打开Chrome的控制台(尽管任何加载jQuery的浏览器都可以工作)
  2. 运行$._data($(".example").get(0), "events")
  3. 向下钻取输出以找到所需的事件处理程序。
  4. 右键单击“handler”，选择“Show function definition”
  5. 代码将显示在Sources选项卡中

$._data()只是访问jQuery的data方法。更可读的替代方法可以是jQuery._data()。

这个SO答案的有趣观点:

从jQuery 1.8开始，事件数据不再是 可从“公共API”获取数据。读这篇jQuery博文。 你现在应该使用这个:

jQuery._data( elem, "events" ); elem应该是一个HTML元素，而不是一个HTML元素 jQuery对象，或选择器

请注意，这是一个内部的，“私人”结构，和 不应该被修改。

在旧版本的jQuery中，您可能不得不使用旧方法 这是:< / p >

jQuery( elem ).data( "events" );

一个版本不可知的jQuery是:(jQuery._data || jQuery.data)(elem, 'events');


提交答案