持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

前言

hi，all。对于chrome开发者工具，大家都不会陌生吧。console面板的介绍与一些内置API我们已经学完了，今个来扒一扒第二个我们熟悉的面板——element面版。

element面板

在element面板，它包括了页面的一些主要信息，dom节点，样式，切换模拟设备等。主要面板如下图。我对面板的一些信息标了号，可以自查一下对这些是否熟悉，主要用处是什么？笔者后面的不是太过关，hh，是得好好补补课了。

不卖关子了，现在公布正确答案：

• 1 —— 用于在页面上选择一个元素，并且查看该元素
• 2 —— 模拟设备之间的切换，主要是pc/移动端(包括手机，平板)
• 3 —— html元素结构显示及实时编辑
• 4 —— 当前选中元素的所在位置(如图中，div.test在html中的body中)
• 5 —— 显示当前选中元素的样式，盒模型
• 6 —— 显示当前选中元素的盒模型，样式属性计算
• 7 —— 显示布局信息(grid 和 flex)
• 8 —— 显示当前选中元素上所绑定的事件
• 9 —— 显示DOM断点列表
• 10 —— 显示当前选中元素的属性
• 11 —— 显示页面无障碍分析

我这边就不一一细细介绍了，挑几个冷门的给各位看看：

layout

审查一下掘金主页的页面结构，查看布局信息。可以很清楚的看到，使用了flex而没有使用grid进行页面布局。

accessibility

同样的，审查掘金主页的结构，查看无障碍分析。跟左侧dom树对比着看，结构还是很清晰的。

html元素右键菜单

功能从上至下分别为：

• 添加属性
• 编辑属性
• 编辑整段HTML
• 复制一个元素
• 删除元素
• 剪切
• 复制
• 粘贴
• 隐藏元素
• 触发伪类
• 打断点
• 展开元素
• 合并元素
• dom截图
• 滚动到可视区域
• 聚焦
• 进入隔离模式
• 展开布局相关标签
• 用全局变量保存

写在最后

element模块平时大家使用的也比较多，所以一些常用的就不一一拉出来介绍占用篇幅了。bye～