持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第N天,点击查看活动详情
谷歌开发工具(以下用开发者工具简称),是基于谷歌浏览器内含的一套网页制作和调试工具,使用元素面板可以自由操纵 DOM 和 CSS 来调整网站布局和设计,有助于提高调试效率!
DOM 右键功能
命令 | 说明 |
---|---|
Add Attribute | 添加属性 |
Edit Attribute | 编辑属性 |
Duplicate element | 重复元素 |
Delete element | 删除元素 |
cut | 剪切 (仅能在内部 paste) |
paste | 粘贴 |
Copy | 复制 |
Hide element | 隐藏元素 |
Force state | 强制执行状态(伪类状态) |
Break On | 发生中断的条件 |
Expand recursively | 展开子级 |
Collapse children | 收起子级 |
Capture node screenshot | 截取节点屏幕截图 |
Scroll into view | 滚动元素至可视区 |
Focus | 聚焦 |
Badge settings | 标志设置 |
Store as global variable | 存储为全局变量 |
查看 DOM
检查 DOM 元素
- 右键单击页面元素,并选择 Inspect,选择检查/审查元素
- 单击 DevTools 左上角的 Inspect 图标
方向键控制页面元素
- ↑↓(上下方向键)选择选定元素上方/下方元素
- ←(左方向键) 折叠当前选中的节点。如果节点已经折叠,此快捷方式将选择其上方的元素
- →(右方向键)展开当前选定的节点。如果节点已展开,此快捷方式将选择其下方的元素
DOM 移动排序
拖动节点以重新排序
滚动查看
选中节点右键点击 -> Scroll into view;快速重新定位视口,以便可以看到选中的节点
显示标尺
- 设置 -> preferences -> element -> show rulers on hover
- 快捷方式用法 ,Control+ Shift+P(打开命令菜单)-> 输入 show rulers on hover ->选中 enter
搜索节点
Control+F -> 输入搜索文本
编辑 DOM
编辑操作可以 DOM 右键功能说明,这里只重点说明部分功能,编辑状态下,鼠标点击编辑区以外地方或者按下 ESC,自动更新修改内容
编辑标签
双击标签名,标签进入编辑状态
编辑属性
- 双击属性名,修改属性
- 编辑状态下,按 Tab 键可以在属性值之间循环。到达最后一个属性值,再按 Tab 键则会创建一个新的属性字段。
访问控制台中的节点
在 Chrome 的 Elements 面板中,$0 是对我们当前选中的 html 节点的引用
Copy 复制子菜单
命令 | 说明 |
---|---|
Copy element | 复制元素 |
Copy outerHTML | 复制节点 (与复制元素基本一样) |
Copy selecter | 复制 CSS 选择器 |
Copy js path | 复制 js 选择器 |
Copy styles | 复制元素下所有的样式 |
Copy xpath | 复制 XML 路径 |
Copy full xpath | 复制 完整 XML 路径 |
复制下载 svg
- 对于包含了 svg 完整路径元件的 svg,右键复制元素即可
- 对于通过 use 元素跨 svg 调用的 svg,通过 xlink:href 属性找到对应元件名,找到 SVG Sprite(多个 symbol 组装的元件的集合的 svg),通过 element 面板搜索功能找到对应的 symbol 元件,右键复制,存入记事本,修改后缀名为 svg,全局替换 symbol 为 svg
存储为全局变量
如果需要多次引用某个节点,可以将其存储为全局变量,随时引用
添加/启用/禁用 CSS 伪类
选中节点右键点击 -> Force state ;设置对应伪类状态,方便样式调试
设置 DOM 断点
DOM 断点类似于源面板中的断点,它用来暂停在一定条件下运行的 JavaScript 代码,当你不确定 JavaScript 脚本的哪一部分会更新给定元素的时候,你可以使用 DOM 断点来调试复杂的 JavaScript 应用。
触发断点的条件 | 说明 |
---|---|
Subtree modifications | 子节点变化时触发断点 |
Attribute modifications | 属性改变时触发断点 |
Node removal | 节点删除时触发断点 |
选中节点右键点击 -> Break On -> 选中触发断点的条件
css 检查和调试
切换元素伪类状态
选中节点 -> 点击 css 面板:hov ;勾选/取消勾选对应伪类状态,呈现对应状态下样式
增加/删除 css 类
- 单击.cls,DevTools 显示一个文本框,输入类名后点击 enter 键,您可以在其中向所选元素添加类。
- 可通过文本框下 css 类复选框,控制当前元素应用的 css 类
添加/编辑 CSS 规则
颜色
对于带颜色的样式声明,可点击左侧小方块,预览和修改颜色
角度修改
对于带角度的样式声明,可点击角度值旁边的角度预览框,预览和修改角度
动画修改
针对 transition-timing-function、animation-timing-function 样式规则,可单击规则旁的紫色图标,预览和更改动画
阴影修改
对于带阴影的样式声明,可点击左侧阴影图标,调整阴影属性
flex 布局调试
- 对于应用了 display: flex 或 display: inline-flex 样式声明的 dom 元素,右侧会展示 flex 徽标,点击可展示当前元素的 flexbox 可视化结构
- 对于 flex 布局的样式声明,可点击右侧图标,打开 flexbox 编辑器
- 打开 Layout 窗格并向下滚动到 Flexbox 部分。您可以在此处查看页面的所有 flexbox 元素
grid 布局调试
调试与 flex 基本一致
模拟明暗主题偏好并启用自动暗模式
在 Elements > Styles 窗格中,单击切换常见的渲染模拟(Toggle common rendering emulations)
更改长度值
-
更改长度单位;鼠标悬停在属性值上,点击单位名称右侧的下角标,从下拉列表中选择单位。
-
单击属性值,进入编辑状态可直接更改属性值,也可鼠标上下滚动更改,也可使用方向键盘修改
-
可以鼠标悬停在单位值上,当指针变为水平双头箭头时,水平拖动以增加或减少值