12. Element面板

作者: 澄澄真可爱 | 来源:发表于2021-03-14 08:22 被阅读0次

1. Alt + Click展开所有的子节点

alt-click-expand-node.gif

2. 轻松修改tagName

quick-edit-element.gif

3. 查看元素的事件侦听器

view-event-listeners.gif

介绍

DevTools可以向您显示在元素上注册的JavaScript事件侦听器。例如,向click注册的处理程序.addEventListener()。

DevTools还可将您带到注册该事件的确切代码行,这在从中进行外部调试时非常有用。

如何使用此功能

在“Element”面板中检查元素
导航到“Element”面板中的“Event Listener”窗格
浏览在任何节点上注册的事件。您可以通过在上下文菜单中选择“显示函数定义”来查看事件侦听器的源。

补充

有时候事件显示特别多,可以去掉 Ancestors复选框,只显示绑定在元素自身的事件,而非被代理的事件

思考

事件的冒泡与代理,事件的队列

相关文章

网友评论

    本文标题:12. Element面板

    本文链接:https://www.haomeiwen.com/subject/hohiqltx.html