Chrome 开发者工具调试方法 - 元素面板

497 阅读5分钟

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

谷歌开发工具(以下用开发者工具简称),是基于谷歌浏览器内含的一套网页制作和调试工具,使用元素面板可以自由操纵 DOM 和 CSS 来调整网站布局和设计,有助于提高调试效率!

DOM 右键功能

rightClickMenu.png

命令说明
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 移动排序

拖动节点以重新排序

elementOrder.gif

滚动查看

选中节点右键点击 -> Scroll into view;快速重新定位视口,以便可以看到选中的节点

scrollIntoView.gif

显示标尺

  • 设置 -> preferences -> element -> show rulers on hover

rulerHover.gif

  • 快捷方式用法 ,Control+ Shift+P(打开命令菜单)-> 输入 show rulers on hover ->选中 enter

rulerHoverShortCut.gif

搜索节点

Control+F -> 输入搜索文本

编辑 DOM

编辑操作可以 DOM 右键功能说明,这里只重点说明部分功能,编辑状态下,鼠标点击编辑区以外地方或者按下 ESC,自动更新修改内容

编辑标签

双击标签名,标签进入编辑状态

编辑属性

  • 双击属性名,修改属性
  • 编辑状态下,按 Tab 键可以在属性值之间循环。到达最后一个属性值,再按 Tab 键则会创建一个新的属性字段。

访问控制台中的节点

在 Chrome 的 Elements 面板中,$0 是对我们当前选中的 html 节点的引用

currentEleNode.gif

Copy 复制子菜单

命令说明
Copy element复制元素
Copy outerHTML复制节点 (与复制元素基本一样)
Copy selecter复制 CSS 选择器
Copy js path复制 js 选择器
Copy styles复制元素下所有的样式
Copy xpath复制 XML 路径
Copy full xpath复制 完整 XML 路径

复制下载 svg

  • 对于包含了 svg 完整路径元件的 svg,右键复制元素即可

svgDown.gif

  • 对于通过 use 元素跨 svg 调用的 svg,通过 xlink:href 属性找到对应元件名,找到 SVG Sprite(多个 symbol 组装的元件的集合的 svg),通过 element 面板搜索功能找到对应的 symbol 元件,右键复制,存入记事本,修改后缀名为 svg,全局替换 symbol 为 svg

svgDownBySymbol.gif

存储为全局变量

如果需要多次引用某个节点,可以将其存储为全局变量,随时引用

storeGlobal.gif

添加/启用/禁用 CSS 伪类

选中节点右键点击 -> Force state ;设置对应伪类状态,方便样式调试

forceState.gif

设置 DOM 断点

DOM 断点类似于源面板中的断点,它用来暂停在一定条件下运行的 JavaScript 代码,当你不确定 JavaScript 脚本的哪一部分会更新给定元素的时候,你可以使用 DOM 断点来调试复杂的 JavaScript 应用。

触发断点的条件说明
Subtree modifications子节点变化时触发断点
Attribute modifications属性改变时触发断点
Node removal节点删除时触发断点

选中节点右键点击 -> Break On -> 选中触发断点的条件

eleBreakOn.gif

css 检查和调试

切换元素伪类状态

选中节点 -> 点击 css 面板:hov ;勾选/取消勾选对应伪类状态,呈现对应状态下样式

pseudostate.jpg

增加/删除 css 类

  • 单击.cls,DevTools 显示一个文本框,输入类名后点击 enter 键,您可以在其中向所选元素添加类。
  • 可通过文本框下 css 类复选框,控制当前元素应用的 css 类

aeCssClass.gif

添加/编辑 CSS 规则

aeCss.png

switchCss.png

颜色

对于带颜色的样式声明,可点击左侧小方块,预览和修改颜色

cssColor.png

角度修改

对于带角度的样式声明,可点击角度值旁边的角度预览框,预览和修改角度

anglePreview.png

动画修改

针对 transition-timing-function、animation-timing-function 样式规则,可单击规则旁的紫色图标,预览和更改动画

animatePreview.png

阴影修改

对于带阴影的样式声明,可点击左侧阴影图标,调整阴影属性

shadowPreview.png

flex 布局调试

  • 对于应用了 display: flex 或 display: inline-flex 样式声明的 dom 元素,右侧会展示 flex 徽标,点击可展示当前元素的 flexbox 可视化结构

flexDom.png

  • 对于 flex 布局的样式声明,可点击右侧图标,打开 flexbox 编辑器

flexTool.png

  • 打开 Layout 窗格并向下滚动到 Flexbox 部分。您可以在此处查看页面的所有 flexbox 元素

flexLayout.png

grid 布局调试

调试与 flex 基本一致

模拟明暗主题偏好并启用自动暗模式

在 Elements > Styles 窗格中,单击切换常见的渲染模拟(Toggle common rendering emulations)

themeChange.gif

更改长度值

  • 更改长度单位;鼠标悬停在属性值上,点击单位名称右侧的下角标,从下拉列表中选择单位。 cssUnit.png

  • 单击属性值,进入编辑状态可直接更改属性值,也可鼠标上下滚动更改,也可使用方向键盘修改

  • 可以鼠标悬停在单位值上,当指针变为水平双头箭头时,水平拖动以增加或减少值 cssLen.gif