如何在单击元素时找出javascript运行的内容？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

• Using Chrome, how to find to which events are bound to an element 7 answers
• 使用Chrome，如何找到绑定到元素7的事件的答案

I am looking at the Bing Maps site. I am opening up the my places editor and clicking the polyline tool in the drawing toolbar.

我正在查看Bing Maps网站。我打开了我的位置编辑器并单击绘图工具栏中的折线工具。

I would like to discover what javascript runs when I click on tools in the drawing toolbar.

我想发现当我点击绘图工具栏中的工具时javascript运行的内容。

I have looked at the html and there is no onclick event declared on the element.

我查看了html，并且没有在元素上声明的onclick事件。

I have done text searches on all of the scripts referenced by the page, for the ID of the polyline tool element. This was to try to find javascript that attaches a click event to the element, but I got no matches at all.

我已经对页面引用的所有脚本进行了文本搜索，以获取折线工具元素的ID。这是为了尝试找到将click事件附加到元素的javascript，但我根本没有匹配。

There must be some script running when I click on a tool. How do I find out what script is executing when I click the tool divs in the toolbar?

单击工具时必须运行一些脚本。当我单击工具栏中的工具div时，如何找出正在执行的脚本？

I don't think there is anyway I can set breakpoints if I don't first know what script to set them on. Is there anyway I can trap the javascript that runs to discover what it is, either in IE F12 developer tools or in firebug?

如果我不首先知道要设置它们的脚本，我认为无论如何我都可以设置断点。无论如何，我可以捕获运行的javascript来发现它是什么，无论是在IE F12开发人员工具还是在firebug中？

5 个解决方案

#1

You can have a look at the "Event Listeners" panel in Chrome, it has detailed information about each listener attached to an element.

您可以查看Chrome中的“事件监听器”面板，它包含有关连接到元素的每个监听器的详细信息。

#2

In Chrome Developer Tools click on the timeline tab, uncheck "Loading" and "Rendering", then click the record button (filled circle). Trigger your event by clicking on the button and then stop recording by clicking the circle again. Find your event in the timeline and expand it by clicking on the arrow beside it. On the left it will tell you which function the event called.

在Chrome开发者工具中，点击时间轴标签，取消选中“正在加载”和“渲染”，然后点击记录按钮（实心圆圈）。单击按钮触发事件，然后再次单击圆圈停止录制。在时间轴中查找您的活动，然后点击它旁边的箭头展开它。在左侧，它将告诉您事件所调用的函数。

#3

To locate a potential event handler for a particular element that has been added dynamically try performing a search in all sources of classnames and ids. Once you've found an event handler you can set a breakpoint and verify.

要为已动态添加的特定元素找到潜在的事件处理程序，请尝试在所有类名和ID源中执行搜索。找到事件处理程序后，您可以设置断点并进行验证。

Google Chrome has a global search that works great.

谷歌浏览器的全球搜索功能非常出色。

#4

I've used the Profiler in Chrome's debug tools for this purpose before.

我以前在Chrome的调试工具中使用了Profiler。

Open the site in Chrome, F12 to get the debug tool open. In the tabs at the top of the tool, click Profiles.

在Chrome，F12中打开该网站以打开调试工具。在工具顶部的选项卡中，单击“配置文件”。

Make sure Collect JavaScript CPU Profile is selected, and hit Start, then click on the polyline tool you're curious about, and hit Stop. The profiler should now list out all Javascript calls made while the profiler was active.

确保选中了“收集JavaScript CPU配置文件”，然后单击“开始”，然后单击您感兴趣的折线工具，然后单击“停止”。探查器现在应该列出在探查器处于活动状态时所做的所有Javascript调用。

Firebug probably has something similar.

Firebug可能有类似的东西。

#5

Open up your debugger and start the profiler. Click on what ever you want. Look at what the profiler and see what was called.

打开调试器并启动探查器。点击你想要的东西。查看分析器的内容并查看所谓的内容。