工具
Chrome DevTools 快速参考
Chrome DevTools 快速参考 的可打印速查表，适合快速查阅、学习和桌边参考
示例
速查表包含什么
- 元素面板
- 控制台
- 网络面板
- 源码面板
- 性能面板
- 应用面板
- Lighthouse
- 快捷键
- 移动端调试
- 常用模式
检查与编辑
Right-click -> Inspect | 打开元素面板定位到该元素 |
Double-click tag/attribute | 内联编辑 HTML |
Delete key | 删除选中节点 |
Ctrl+Z | 撤销 DOM 修改 |
H key | 切换选中元素的可见性 |
Drag node | 在 DOM 树中移动元素 |
样式面板
element.style {} | 给元素添加内联样式 |
Click property value | 实时编辑 CSS 值 |
Checkbox next to rule | 切换 CSS 属性开关 |
:hov button | 强制伪状态（:hover、:focus） |
.cls button | 添加/移除 CSS 类 |
Color swatch | 打开颜色选择器 |
Computed tab | 查看最终计算后的 CSS 值 |
下载完整速查表，获取所有章节的打印排版版本
下载 PDF下载
