如何找到什么代码是由一个按钮或元素在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开发工具在任何网站。

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

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

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

杰西解释了原因:

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

根据你们中的一些人的建议，我收集了下面一个答案中有效的方法。

当前回答

解决方案一:忽略列表(以前称为“黑盒”)

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

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

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

打开Chrome开发人员工具(F12或⌘+“+i”)，进入设置(右上方或F1)。在左侧导航/名为“忽略列表”的列中选择页面/选项卡如果在调试器中看到太多噪音，您可能需要检查添加内容脚本以忽略列表

这是你把文件的RegEx模式，你希望Chrome在调试时忽略。例如:jquery\..*\.js (glob模式/人工翻译:jquery.*.js) 如果你想跳过有多个模式的文件，你可以使用管道字符|来添加它们，就像这样:jquery\..*\.js|include\.postload\.js(这就像一个“或这个模式”，可以这么说。或者按“添加”按钮继续添加。现在继续执行下面描述的解决方案3。

小贴士!我经常使用Regex101(但还有很多其他的:)来快速测试我生锈的正则表达式模式，并发现我在逐步的正则表达式调试器中哪里出了问题。如果你在正则表达式方面还不“流利”，我建议你开始使用帮助你编写和可视化正则表达式的网站，如http://buildregex.com/和https://www.debuggex.com/

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

解决方案2:可视事件

这是一个很好的工具:

Visual Event是一个开源Javascript bookmarklet，它提供调试已附加到DOM的事件的信息元素。视觉事件显示: 哪些元素附加了事件附加到元素的事件类型将与事件一起运行的代码将被触发定义附加函数的源文件和行号(仅适用于Webkit浏览器和Opera)

解决方案3:调试

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

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

打开Dev Tools -> Sources选项卡，在右侧找到事件监听器断点: 展开鼠标，选择“单击” 现在单击元素(执行应该暂停)，现在就可以调试代码了。您可以按F11(即Step in)查看所有代码。或者在堆栈中返回几跳。可能会有大量的跳跃

解决方案4:检索关键字

激活Dev Tools后，您可以使用⌘+ +F或:

搜索#envio或任何你认为的标签/类/id开始聚会，你可能会比预期更快地到达某个地方。

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

如果这对你来说有点陌生，可以看看Chrome的调试教程。

2014-09-12 23:21:26

其他回答

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

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

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

有趣的一点是:

从jQuery 1.8开始，事件数据不再是可从“公共API”获取数据。阅读这篇jQuery博客文章。你现在应该使用这个: jQuery。_data(elem， "events");elem应该是一个HTML元素，而不是 jQuery对象或选择器。请注意，这是一个内部的“私人”结构不应该被修改。仅用于调试目的。在较旧版本的jQuery中，您可能不得不使用旧方法这是: jQuery(elem)。数据(“事件”);

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

2017-10-04 10:54:58

听起来像是“…我一行一行地跳…"这部分错了。你是否StepOver或StepIn，你确定你不会不小心错过相关的调用吗?

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

2014-05-06 08:45:31

你可以使用findHandlersJS

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

findEventHandlers(“点击”、“img envio。”)

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

element The actual element where the event handler was registered in events Array with information about the jquery event handlers for the event type that we are interested in (e.g. click, change, etc) handler Actual event handler method that you can see by right clicking it and selecting Show function definition selector The selector provided for delegated events. It will be empty for direct events. targets List with the elements that this event handler targets. For example, for a delegated event handler that is registered in the document object and targets all buttons in a page, this property will list all buttons in the page. You can hover them and see them highlighted in chrome.

更多信息在这里，你可以尝试在这个例子网站这里。

2014-05-06 08:51:38

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

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

1. 设置事件侦听器断点

这次你已经很接近了。

打开Chrome Dev Tools (F12)，并进入Sources选项卡。向下钻取至鼠标->单击 (点击放大)

2. 点击按钮!

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

(点击放大)

3.找到光荣的代码!

现在，这里的技巧是不要忘乎所以地按键，并保持在屏幕上的眼睛。

按F11键(步进)直到所需的源代码出现源代码终于到达在上面提供的jsFiddle示例中，在到达所需的事件处理程序/函数之前，我必须按F11 108次根据用于绑定事件的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给出的解释。

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

2014-05-07 00:25:44