DOM树

可以查看当前节点和所有父辈节点

Image.png Image.png

菜单作用

(1) Add attribute：添加属性，比如添加title属性；(节点没有属性时，快捷键为Enter)
(2) Edit attribute：编辑属性（在节点的属性上右键才出现这项）；（节点有属性时，快捷键为Enter）
(3) Force element state：使元素处于某种伪类状态，可选四种：
:active -> 选定状态
:hover -> 鼠标移到元素上的状态
:visited -> 已经访问过的状态
:focus -> 获取焦点状态
这些状态通常用来调试不同状态下的css样式
(4) Edit as HTML：编辑节点，用于编辑的文本框在失去焦点后结束编辑；（快捷键为F2）
(5) Copy as HTML：复制HTML；
(6) Copy css path：复制css路径，类似当前节点的选择器；
(7) Copy XPath：复制XPath；
(8) Delete node：删除节点；（快捷键为del）
(9) Inspect DOM properties：在console（会自动打开drawer中的console面板）中显示当前节点对象
(10) Break on：
Subtree modifications -> 子树修改时打断；
Attributes modifications -> 节点属性修改时打断；
Node removal -> 节点移除时打断；
(11) Scroll into view：当前节点不在视口中时，页面滚动至节点出现在视口；
(12) Word wrap：节点过长时是否换行，勾上-> 换行；不勾 -> 不换行，出现滚动条；

styles面板

修改样式时可以看到效果

Styles面板里显示的是：在选中节点上应用的样式，通过横线分割每一条rule，rule的权重越靠上越高。
可以对rule进行下列操作：
1.修改：
选择器 -> 点击对应的选择器（除element.style，它不是选择器）；
样式 -> 点击对应样式；
2.添加：
rule，选择器 ->（后面描述）；
样式 -> 在rule的空白处点击；
3.删除：
rule -> 将所有样式删除即可；
样式 -> 编辑为空，或者将样式的前的checkbox取消勾选；

面板顶部可以看到：

element.style：在这里面添加的样式会被应用为节点的style属性；
.hover:设置当前元素的伪类
例如::before :afater :hover :focus :visited
.cls添加新的calss
+在该css中添加新的rule

快捷键

在调试一些度量属性时，有些快捷键是非常好用的：
当你在调height时
up -> 以1为增量增加高度；
down -> 以1为减量减少高度；
当你在调元素的opacity时
alt+up -> 以0.1为增量增加透明度；

      alt+down -> 以0.1为减量减少透明度；
有时你希望跨度更大些
      shift+up或pageup -> 以10为增量
      shift+down或pagedown -> 以10为减量
      shift+pageup -> 以100为增量
      shift+pagedown -> 以100为减量

盒子模型

mage.png

Event　Listreners面板

Image.png

展开对应的事件类型后，可以看到在对应dom上绑定的事件详细，以及源文件；

DOM Breakpoints

通过

显示通过break on设置在dom上的断点

Propertties

显示当前 DOM的原型链，也就是 ＤＯＭ都继承自哪些类