使用 Chrome javascript 调试器跟踪事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7054708/
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
Track events using Chrome javascript debugger
提问by mrtsherman
I don't have a specific use case here, but occasionally I have been either helping out someone on SO or seen a cool javascript effect on a website and been curious about the code that drives it. However, the event that drives the code may not be immediately obvious. If I can't find the event handler then it can be really hard to find the js responsible for the effects I am interested in. Is there a quick way in the debugger to identify the events attached to an element and to drop a break point in when it fires?
我在这里没有特定的用例，但偶尔我一直在帮助某人，或者在网站上看到很酷的 javascript 效果，并对驱动它的代码感到好奇。但是，驱动代码的事件可能不会立即显而易见。如果我找不到事件处理程序，那么很难找到负责我感兴趣的效果的 js。调试器中是否有一种快速方法来识别附加到元素的事件并删除断点在什么时候着火？
So for example an event may exist on a structure something like so
因此，例如一个事件可能存在于这样的结构上
<div>
<ul>
<li><span><img /></span></li>
</ul>
</div>
Now I don't know if the event is bound to the img, span, li, ul or div itself. Chrome has the Event Listeners area, but I feel like it doesn't always contain events. Anything you guys do that allows you to quickly find the event and drop a break point into it?
现在我不知道事件是否绑定到 img、span、li、ul 或 div 本身。Chrome 有 Event Listeners 区域，但我觉得它并不总是包含事件。你们做的任何事情都可以让您快速找到事件并在其中放置一个断点？
回答by Matthew
yes there is!
就在这里！
find the element that is being reloaded and right click, choose inspect from context menu, then right click the html of the element (in the bottom firebugish pane), in the context menu there are options to:
找到正在重新加载的元素并右键单击，从上下文菜单中选择检查，然后右键单击元素的 html（在底部的 firebugish 窗格中），在上下文菜单中有以下选项：
- break on subtree modifications
- break on attributes modifications
- break on node removal
- 中断子树修改
- 中断属性修改
- 节点移除中断
Article on awesome new dev features in chrome: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/
关于 chrome 中令人敬畏的新开发功能的文章：http: //elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/
回答by BrianFreud
If you have access to the .js, just add "debugger;" on its own line. Whenever Chrome (or FF) hits that, it'll trigger the debugger and let you walk through. Esp useful if you have some general idea which code will trigger the event. See http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/for more.
如果您有权访问 .js，只需添加“调试器”；在自己的线上。每当 Chrome（或 FF）遇到它时，它就会触发调试器并让您通过。如果您对哪些代码将触发事件有一些大致的了解，则 Esp 很有用。见http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/为更多的。
回答by Alex Shilman
Right click on the element in chrome dev tools, and click on 'break on' , then you would see multiple selections such as sub tree modifications. Or you could also go to chrome//:tracing
在 chrome dev 工具中右键单击元素，然后单击 'break on' ，然后您会看到多个选择，例如子树修改。或者你也可以去 chrome//:tracing
