1. Alt + Click展开所有的子节点
alt-click-expand-node.gif2. 轻松修改tagName
quick-edit-element.gif3. 查看元素的事件侦听器
view-event-listeners.gif介绍
DevTools可以向您显示在元素上注册的JavaScript事件侦听器。例如,向click注册的处理程序.addEventListener()。
DevTools还可将您带到注册该事件的确切代码行,这在从中进行外部调试时非常有用。
如何使用此功能
在“Element”面板中检查元素
导航到“Element”面板中的“Event Listener”窗格
浏览在任何节点上注册的事件。您可以通过在上下文菜单中选择“显示函数定义”来查看事件侦听器的源。
补充
有时候事件显示特别多,可以去掉 Ancestors
复选框,只显示绑定在元素自身的事件,而非被代理的事件
思考
事件的冒泡与代理,事件的队列
网友评论