使用Chrome JavaScript调试器跟踪事件 [英] Track events using Chrome javascript debugger
问题描述
所以例如一个事件可能存在于一个这样的结构上。
< div>
< ul>
< li>< span>< img />< / span>< / li>
< / ul>
< / div>
现在我不知道事件是否绑定到img,span,li,ul或div本身。 Chrome具有事件侦听器区域,但我觉得它并不总是包含事件。你们做的任何事情都可以让你快速找到这个事件并放弃一个断点。
是的! / p>
找到要重新加载的元素,右键单击
从上下文菜单中选择检查,
然后右键单击元素的HTML(在底部的firebugish窗格),
在上下文菜单中有以下选项:
- 修改子树修改
- 断开属性修改
- 断开节点删除
chrome中的新开发者功能:
http:/ /elijahmanor.com/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: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/
这篇关于使用Chrome JavaScript调试器跟踪事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!