本文参考：
- Chrome 开发者工具中文手册
- Chrome 开发者工具官网
概览
- Elements
- Console
- Source
- Network
- Performance
- Memory
- Application
- Security
- Audits
快捷键
访问 DevTools
| 访问 DevTools | Windows |
|---|---|
| 打开 Developer Tools | F12、Ctrl + Shift + I |
| 打开/切换检查元素模式和浏览器窗口 | Ctrl + Shift + C |
| 打开 Developer Tools 并聚焦到控制台 | Ctrl + Shift + J |
全局键盘快捷键
| 全局快捷键 | Windows |
|---|---|
| 下一个面板 | Ctrl + ] |
| 上一个面板 | Ctrl + [ |
| 更改停靠位置 | Ctrl + Shift + D |
| 刷新忽略缓存内容的页面 | Ctrl + F5、Ctrl + Shift + R |
| 在所有源中搜索文本 | Ctrl + Shift + F |
| 按文件名搜索 | Ctrl + O、Ctrl + P |
按面板分类的键盘快捷键
Elements
| Elements 面板 | Windows |
|---|---|
| 隐藏元素 | H |
| 切换为以 HTML 形式编辑 | F2 |
Styles 边栏
| Styles 边栏 | Windows |
|---|---|
| 转到源中样式规则属性声明行 | Ctrl + 点击属性 |
| 在颜色定义值之间循环 | Shift + 点击颜色选取器框 |
| 以 10 为增量增大/减小值 | Shift + Up、Shift + Down |
| 以 0.1 为增量增大/减小值 | Alt + 向上键、Alt + 向下键 |
Sources
| Sources 面板 | Windows |
|---|---|
| 暂停/继续脚本执行 | F8、Ctrl + \ |
| 越过下一个函数调用 | F10、Ctrl + ' |
| 进入下一个函数调用 | F11、Ctrl + ; |
| 跳出当前函数 | Shift + F11、Ctrl + Shift + ; |
| 转到行 | Ctrl + G |
| 转到成员 | Ctrl + Shift + O |
- 键盘快捷键参考
- 打开 Developer Tools（
F12） --> 转到设置（F1）--> 点击 Shortcuts
Elements 面板
- 检查和调整页面
- 编辑样式
- 编辑 DOM
检查和编辑页面与样式
- 检查和实时编辑 DOM 树中的任何元素
- Styles 窗格中查看和更改任何选定元素的 CSS Rules
- Computed 窗格中查看和修改选定元素的盒模型
编辑样式
- 利用 Styles 窗格，可以在本地以尽可能多的方法更改 CSS ，包括修改现有样式、添加新样式，以及为样式添加规则
- 如果希望样式可以保持（刷新后不会消失），则需要将其保存到开发工作区中
检查应用到元素的样式
Styles 窗格可以显示应用到选定元素的 CSS 规则，优先级从高到低：
- 顶端为
element.style - 下方是与元素匹配的任何 CSS 规则
- 再下方是继承的样式，其中包括与选定元素的祖先实体匹配的任何可继承样式规则
元素应用到的样式
添加、启用和停用 CSS 类
点击 .cls 按钮可查看与当前选定元素关联的所有 CSS 类
- 启用或停用当前与元素关联的类
- 向元素添加新类
.cls 按钮
向样式规则添加背景色或颜色
Styles 窗格提供了一个用于向样式规则添加 color 和 background-color 声明的快捷方式。
添加color等属性的快捷方式
使用 Color Picker 修改颜色
点击颜色声明值左侧带颜色的小方格，即可打开 Color Picker 。
color-picker 简介
- 取色器
- 当前颜色
- 当前值
- 调色板
- 着色和阴影选择器
- 色调选择器
- 不透明度选择器
- 颜色值选择器
- 调色板选择器
编辑 DOM
- 定义你的页面结构
- 通过渲染的 DOM 实时编辑页面的内容和结构
- 无法在 Elements 面板中通过 DOM 更改修改源文件
- 使用 DOM 断点留意 DOM 更改
滚动到视图
点击右键节点并选择 Scroll into View
设置 DOM 断点
可用于调试复杂的 JavaScript 应用，在发生下列一种 DOM 更改时触发断点：子树更改、属性更改、节点移除
与 DOM 断点交互
触发 DOM 断点时，断点将在 DOM Breakpoints 窗格中突出显示。 Call Stack 窗格将显示调试程序暂停的原因
查看元素事件侦听器
在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器
Event Listeners 窗格
Console 面板
- 使用控制台面板
- 命令行交互
使用控制台
- 堆叠冗余消息，或者将其显示在各自的行上
- 清除或保留页面之间的输出，或者将其保存到文件中
- 按严重性等级、通过隐藏网络消息或者按正则表达式模式对输出进行过滤
处理控制台历史记录
保留历史记录：启用控制台顶部的 Preserve log 复选框可以在页面刷新或更改之间保留控制台历史记录。消息会一直存储，直到清除控制台或关闭标签。
选择执行环境
Execution Context Selector
一般，执行环境默认为top（页面的顶部框架）。
如果要查看