Chrome 控制台使用手册专栏【三】Elements Panel

wangsd
4,949 阅读6分钟

DevTools 提供强大的Elements Panel 面板，提供整个文档树的查看，开发者可以通过该面板查看节点的样式、属性、层级关系、绑定事件等节点信息，可以对页面内容进行在线编辑，如样式调整、类动态增删、节点内容修改等，大大提高开发效率以及准确性。

打开

  • 使用 Ctrl + Shift + C (Mac上为 Cmd+Shift+C)打开 DevTools的Elements面板。

  • 使用命令行 Ctrl + Shift + P 输入 Show Elements 切换到 Elements面板

  • ...

使用

面板展示完整的文档树，小箭头支持收缩展开，表示节点层级关系。 image.png

鼠标悬浮DOM节点，页面视图会对应高亮展示节点展示内容区块 image.png

使用审查元素，点击image.png 开启，鼠标悬浮页面内容，会展示节点信息（样式、属性），同时，Elements 节点树会自动高亮对应的DOM节点 image.png

** Console 控制台， $0 表示 当前选中的节点 **

面板记录从html到选中节点的路径 image.png

每个节点都可以查看对应的节点信息 image.png

主要包括

  • Styles 节点样式，可直接修改
  • Computed 节点盒子模型
  • Layout 节点布局信息
  • Event Listeners 节点绑定的事件
  • DOM Breakpoints 节点断点
  • Properties 节点属性
  • [Accessibility] 扩展
  • [Vue.js Properties] Vue 插件拓展属性，查看节点对应实例属性

Elements 配置

点击设置 image.png

选择 Preferences -> Elements image.png

show useragent shadow DOM 展示 shadow-dom 内容 image.png

Web浏览器在构建例如<video>、<input type=”range” />、<input type=”password” /> 标签的时候，在Elements面板下看到的也只是基本的元素，其他的元素都被隐藏了

word wrap 文本节点内容换行 image.png image.png

show html comments 显示html备注信息 image.png

reveal DOM node on hover 鼠标悬浮节点自动跟踪节点在文档树的位置 image.png 关闭需要 click 后才跟踪节点在文档树的位置

show detailed inspect tooltip 显示DOM信息 image.png

show rules 显示标尺 image.png

Element编辑

节点在线编辑，右击选中节点弹出菜单 image.png

  • Add attribute 新增一个属性

  • Edit attribute 编辑属性（鼠标悬浮在属性上面才会出现此选项）

  • Edit as HTML 整个节点可编辑

  • Duplicate Element 复制节点，并插入节点下方

  • Delete Element 删除此节点

  • Cut 裁剪节点

  • Copy 复制节点

  • Paste 粘贴节点

  • Hide Element 隐藏节点

  • Force state 鼠标悬浮状态控制展示

  • Break on 打DOM断点，节点属性修改会挂起

  • Collapse Children 收起父节点

  • Captrue node screenshot 截图节点内容

  • Scroll into view 节点滚动到视图可见

  • Focus 节点获取焦点

同时节点支持鼠标双击选中编辑

  • 双击属性 - 编辑属性
  • 双击文本节点 - 编辑文本节点

节点支持拖拽改变位置 image.png

Element信息

Styles 节点样式，可直接修改

基础用法

选中Element 节点，查看该节点相关css样式，该节点在DOM树高亮 image.png

单击样式名，可以修改样式，或者删除样式 image.png

取消勾选，也可删除样式效果 image.png

点击样式值，可修改 image.png

点击空白处，添加新样式 image.png

输入样式名，会自动弹出与输入内容匹配的样式名列表，可以快速选择，输入完名称，键入 英文冒号(:)可以进行属性值输入，或者直接点击回车也可以（从弹出匹配样式列表选中） image.png

点击外部样式表 image.png

为节点添加一个样式类，输入新增样式类名，回车确认 image.png

image.png

image.png

查看鼠标相关伪元素样式，同force state查看样式 image.png

image.png

为当前样式类添加新css规则 image.png

悬浮规则集，显示➕号，可以快速再次添加新css规则 image.png

image.png

内联样式

第一个样式集（element.styles）为选中节点的内联样式，允许动态添加样式查看效果，直接点击空白会自动添加输入框进行样式填写 image.png

element.styles 添加的样式会自动添加到DOM树上选中的节点 image.png

盒子模型

盒子模型同Computed面板，也可直接修改盒子模型，查看节点实际生效的样式及样式值。 image.png

特殊样式

colororbackground-color值的左侧，有一个小方块，它是颜色的预览，点击打卡拾色器 image.png

按住 shift 点击色块，进行十六进制、rgba、hls格式切换

拾色器带对比度指标（Contrast Ratio）。最少要达到 AA 等级（4.5:1 的对比度）才能提高辨识度。（AAA 等级 = 7:1 的对比度；最高对比度 = 21:1 （纯黑和纯白））。文本颜色color 属性才能看到这个对比度 image.png

使用角度时钟更改角度值 image.png

image.png

修改flex、grid布局，带布局图标，点击可以选中布局方式 image.png

animation 动画预览

从更多工具打开 Animation 面板 image.png

image.png

面板主要分为四部分：

  • Controls 可以清除所有当前捕获的动画组，或更改当前选定动画组的速度
  • Overview 选择一个动画组以在详细信息窗格中检查和修改它
  • Timeline 暂停并开始动画，或跳转到动画中的特定点
  • Details 检查并修改当前选定的动画组

image.png

传送门-参考

传送门-示例

拓展-css 概览

打开 css 概览 image.png

单击 capture overview(捕获概述) 按钮以生成页面的 CSS 概述报告。 image.png

生成页面的 CSS 概述报告 image.png

概述报告5个部分组成：

  • Overview summary 页面概览摘要
  • Colors 页面使用的颜色，同时列举对比度信息
  • Font info 页面使用的字体信息
  • Unused declarations 无效的样式声明
  • Media queries 媒体查询，按出现次数排序

点击可查看对应节点

Computed 节点盒子模型

点击 Computed 面板，展示节点的盒子模型 image.png

展示节点实际生效的样式 image.png

show all 展示节点支持的所有样式 image.png

group 对节点样式分组 image.png

可对样式进行过滤 image.png

可双击盒子模型 的border、margin、padding，直接编辑数值 image.png

Layout 节点布局信息

文档树会标识 节点的布局方式 flex、grid，点击则显示叠加视图 image.png

点击 Layout 查看网页所有 grid、flex 布局节点 image.png

flex

勾选flexbox 复选框，显示flex叠加视图 image.png

同时文档树布局徽章会呈选中状态 image.png

在Styles 属性查看 display: flex，点击 image.png 可以可视化调整flex布局 image.png

grid

勾选复选框，显示网格叠加视图，或者点击节点 grid 徽章（才能看到网格信息） image.png

Show line numbers 展示网格行号 image.png

Hide line labels 隐藏网格线标签 image.png

Show line names 显示网格线名 image.png

Show track sizes 显示网格轨道大小 image.png

Show area names 显示网格区域名称 image.png

Extend grid lines 扩展网格边界线 image.png

Event Listeners 节点绑定的事件

点击 Event Listeners 面板，展示节点所绑定的所有Event 事件 image.png

点击 Remove 移除监听器，点击 文件，自动跳转到 Source 文件资源

勾选复选框，展示页面所有监听事件 image.png

过滤事件类型，是passive 还是 blocking image.png

DOM Breakpoints 节点断点

选中想要监控的DOM元素，点击右键，选择Break on->Attributes modifications image.png

DOM Breakpoints的tab里能看到对应的断点 image.png

调试器就会自动在DOM的属性发生变化的地方挂起 image.png

Properties 节点属性

展示节点所有属性值 image.png

参考1
参考2 参考3

avatar
文章
阅读
粉丝