使用Chrome JavaScript调试器跟踪事件

本文介绍了使用Chrome JavaScript调试器跟踪事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我没有在这里使用具体的用例，但有时我一直在SO上帮助一个人，或者在一个网站上看到一个很酷的javascript效果，并且对于驱动它的代码好奇。但是，驱动代码的事件可能并不明显。如果我找不到事件处理程序，那么真的很难找到负责我感兴趣的效果的js。调试器中有一个快速的方法来识别附加到元素的事件并删除一个断点当它触发？

所以例如一个事件可能存在于一个这样的结构上。

< div> < ul> < li>< span>< img />< / span>< / li> < / ul> < / div>

现在我不知道事件是否绑定到img，span，li，ul或div本身。 Chrome具有事件侦听器区域，但我觉得它并不总是包含事件。你们做的任何事情都可以让你快速找到这个事件并放弃一个断点。

解决方案

是的！ / p>

找到要重新加载的元素，右键单击从上下文菜单中选择检查，然后右键单击元素的HTML（在底部的firebugish窗格），在上下文菜单中有以下选项：

• 修改子树修改
• 断开属性修改
• 断开节点删除

chrome中的新开发者功能： http：/ /elijahmanor/7-chrome-tips-developers-designers-may-not-know/

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?

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?

解决方案

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:

• break on subtree modifications
• break on attributes modifications
• break on node removal

Article on awesome new dev features in chrome: elijahmanor/7-chrome-tips-developers-designers-may-not-know/