演示简介

环境

• Chrome 浏览器
• 版本 90.0.4430.93

操作释义

• 聚焦控制台

  • 鼠标在控制台范畴内点击一下，使后续操作上下文绑定在控制台中。

关上控制台

以掘金为示例讲述：

通过链接关上页面，通过 F12 或鼠标右键【查看】关上开发者工具控制台。

默认布局

1. 布局渲染

   • Render Tree 的视觉体现

2. Elements 面板

   • DOM Tree 折叠模式展现

3. Styles 面板

   • CSSOM 汇总

4. Console 面板

   • 默认暗藏，键盘 Esc 键切换展示状态

Elements 面板

锚点

执行步骤

1. 抉择如图红色标记工具点击掘金的页面菜单，能够看到 Elements 面板聚焦到选中展现对应的 DOM 构造。
2. 在对应的 DOM 构造后，有 $0 的非凡标识，能够在 Console 面板间接应用 $0 援用以后选中元素

利用场景

• 查看动静插入的 DOM 树是否正确
• 查看动静编辑的节点属性是否正确

嵌套构造

执行步骤

1. 通过锚点工具选中某 DOM 元素
2. 在 Elements 面板底部，展示以后选中元素的先人选择器
3. 点击对应的选择器，Elements 面板聚焦对应的 DOM 元素

利用场景

• 查看元素嵌套关系

响应式布局

执行步骤

1. 通过按钮 1 开启响应视图模式
2. 自定义或应用预置视图尺寸
3. 定义网络状态
4. 横竖屏切换
5. 更多细节展现

利用场景

• Mobile H5 开发：不同手机尺寸下的布局适配调试
• PC Web 开发：在不同断点范畴内的布局差异化展现调试
• PC & Mobile 开发：不同视图模式下的适配调试

Flex 布局

如果足够认真，能够看到选中页面菜单对应的 DOM 构造中，有一个差异化的展现模式：

执行步骤

1. 聚焦控制台，Ctrl + P 输出 > experiments 选中 Settings Show Experiments 回车 或 间接点击地位 2，抉择 Experiments
2. 开启 Flex 调试

1. 点击 Elements 面板中 DOM 构造后的 flex 标识，以后页面渲染会高亮展现 Flexbox 中的子项布局

1. 点击 Styles 面板中对应款式后的标识，能够快捷批改以后 Flexbox 的布局属性

利用场景

• 查看 Flexbox 布局是否正确
• 疾速调试 Flexbox 布局

Styles 面板

款式起源

• 用户代理内置的款式

  • 浏览器默认款式

• 站点开发者定义的款式

  • 网站开发者内联、外联款式

• 站点用户指定的款式

  • 用户在控制台编写的款式
  • 用户通过抓包工具重定向的款式
  • 用户通过浏览器插件 (如: Stylus) 指定的款式

款式申明

在 Styles 面板展示的款式申明是默认状态下的申明款式，即页面初始化渲染后的款式，不蕴含交互状态款式。

Computed 面板

该面板汇总浏览器最终利用到元素上的款式。

锁定交互伪类

案例场景

鼠标在掘金页面菜单悬停时，能够看到菜单文字款式发生变化，如何调试悬停款式？

执行步骤

1. 通过锚点工具聚焦以后变动的 DOM 节点
2. 通过 Styles 面板的 :hov 按钮切换节点交互状态
3. 即可在 Styles 面板查看交互状态下的款式

利用场景

• 调试通过伪类产生交互款式的场景

动静批改元素款式类名

执行步骤

1. 点击 .cls 按钮
2. 通过点击 class 复选框动静增删类名
3. 能够看到删除 active 类名时，款式产生扭转
4. 在其它同级节点上增加 active 类名，验证猜测

利用场景

• 调试在条件逻辑场景中，通过动静增删类名扭转的款式

用户自定义款式

执行步骤

1. 选中 DOM 元素
2. 点击 + 按钮
3. 在减少的选择器后增加款式申明

利用场景

• 调试款式时，编写试验性质的款式申明

DOM 断点

案例场景

Elements 面板能够查看固定 / 动静插入的节点，现有这样一个场景：

在维持某交互的状态下才会插入节点，勾销该交互状态时，删除节点；

这时，如何核查 DOM 节点的正确性呢？

案例剖析

• 初始化时，浮层 DOM 构造并不存在 —— 不是通过款式暗藏的构造，而是动静增加的
• 无奈通过交互伪类调试
• 浮层 DOM 构造在元素范畴悬浮时才展现，无奈锁定该状态去查看浮层构造
• 聚焦父级 DOM，通过 Event Listeners 面板可知父级 DOM 绑定鼠标事件 —— 代码逻辑生成浮层构造

执行步骤

1. 聚焦动静增加元素的间接父级 DOM
2. 鼠标右键选中 Break on —> subtree modifications

1. 这时鼠标停留在父级节点时，会触发断点

1. 通过 F10 执行下一步，直至浮层展现进去

1. 通过锚点工具聚焦浮层构造，即可检阅以后 DOM 构造的正确性

利用场景

• 调试在代码逻辑中，通过交互事件切换 DOM 构造的利用场景

触发机会

• Break on 二级菜单是复选框，意味着不同机会触发断点

• subtree modifications

  • 仅在子元素增删时触发断点

• attribute modifications

  • 仅聚焦的 DOM 节点属性变动时触发断点

• node removal

  • 仅聚焦的 DOM 节点被移除时触发断点

• subtree modifications & attribute modifications

  • 子元素扭转 (增删、属性变动) 时触发断点

• attribute modifications & node removal

  • 聚焦的 DOM 节点发生变化 (属性变动、被移除) 时触发断点

断点治理

• DOM Breakpoints 面板治理以后页面的断点

DOM 快照

执行步骤

1. 通过锚点工具选中对应的 DOM 元素
2. 右键抉择 Capture node screenshot
3. 浏览器将以后 DOM 元素渲染构造以图片的模式下载

利用场景

• 获取快照

滚动到视图范畴

执行步骤

1. 在 Elements 面板抉择一个视窗内不可见的 DOM 元素
2. 右键抉择 Scroll into view
3. 浏览器将滚动页面直至以后 DOM 元素呈现在视窗内