当我单击一个元素时，如何找出 javascript 运行的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10262902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I find out what javascript runs when I click an element?
提问by Duncan Gravill
I am looking at the Bing Mapssite. I am opening up the my places editorand clicking the polyline toolin the drawing toolbar.
我正在查看Bing 地图站点。我正在打开我的地点编辑器并单击绘图工具栏中的折线工具。
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 onclickevent 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。这是为了尝试找到将点击事件附加到元素的 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?
如果我不知道要在什么脚本上设置断点，我认为无论如何我都无法设置断点。无论如何，我可以在 IE F12 开发人员工具或 firebug 中捕获运行以发现它是什么的 javascript 吗？
回答by Dagg Nabbit
You can have a look at the "Event Listeners" panel in Chrome, it has detailed information about each listener attached to an element.
您可以查看 Chrome 中的“事件侦听器”面板，它包含有关附加到元素的每个侦听器的详细信息。
回答by Paul
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 开发者工具中点击时间轴选项卡，取消选中“加载”和“渲染”，然后点击录制按钮（实心圆圈）。单击按钮触发事件，然后再次单击圆圈停止录制。在时间线中找到您的事件，然后单击旁边的箭头将其展开。在左侧，它会告诉您事件调用了哪个函数。
回答by Dan M
I've used the Profiler in Chrome's debug tools for this purpose before.
为此，我之前在 Chrome 的调试工具中使用了 Profiler。
Open the site in Chrome, F12to 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 可能有类似的东西。
回答by xandercoded
To locate a potentialevent handler for a particular element that has been added dynamicallytry performing a search in all sources of classnamesand 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.
谷歌浏览器有一个很好的全局搜索。
回答by epascarello
Open up your debugger and start the profiler. Click on what ever you want. Look at what the profiler and see what was called.
打开调试器并启动分析器。单击您想要的任何内容。看看分析器是什么，看看叫什么。
