一, 通用
1. DevTools 面板快捷键
快捷键 (mac) | 作用 |
---|---|
⌘ + shift + D | 切换纵横布局 |
⌘ + [ / ⌘ + ] | 切换左 / 右面板 |
⌘ + 1-9 | 转到编号 1-9 的面板(需要打开 Preferences-Appearance-Enable Ctrl + 1-9 ...) |
⌘ + shift + C | 选择元素 |
⌘ + option + I | 开发者工具 |
⌘ + P | Command Menu |
2. Stack trace(保存堆栈信息)
在团队协作中, 将堆栈跟踪的信息保存为一个文件传输可以降低沟通成本. 操作: 在堆栈信息右键 - Save as...
3. copy
全局方法 copy() 能拿到能在控制台打印的任何资源.
4. 递增 / 递减
在调整样式时, 使用一下快捷键可实现数值的递增递减.
image.PNG
5. 使用 Command
类似 Visual Studio Code ,Chrome DevTools 也是使用了 + Shift+ P 来打开命令面板.
实例:
执行
Capture node screenshot
进行节点截图;
执行
Capture full size screenshot
进行滚动截图;
执行
Switch to dark theme
切换黑暗主题;
6. 代码块
新建
打开 Sources - Snippets, 点击 New snippet 新建可服用的代码.
执行
在 Snippets 菜单右键运行;
在 Snippets 菜单使用快捷键 + Enter;
打开
Command Menu ``( + P)
, 输入
! + [代码块命名]
运行;
二, console
1. $ 符
变量 | 引用 |
---|---|
$ | document.querySelector |
$$ | 执行 document.QuerySelectorAll 并返回节点数组而非 Node list |
$_ | 上次结果的引用 |
$0 | 当前 html 节点 |
$[1-4] | 上 [1-4] 选择节点的引用 |
$i | 插件 Console Importer 变量,可在 console 引入 npm 包 |
2. 打印对象的 "BUG"
console 中打印出的对象, 在你打印出他内容之前, 是以引用的方式保存的.
3. async
console 默认就被 async 包裹, 所以可以直接使用 await.
- 4.
- Conditional breakpoints
条件断点
右击行号, 选择 Add conditional breakpoint..., 输入条件. 如果条件成立, 断点就会暂停代码的执行.
5. console 方法
方法 | 说明 |
---|---|
console.assert | 断言,第一个参数为假时,打印后面的参数 |
console.table | 以表格形式输出 |
console.dir | 打印节点所关联到的真实的 js 对象 |
console.time | 开启一个计时器 |
console.timeEnd | 结束计时并且将结果在 console 中打印出来 |
6. 给 console.log 加上样式
如果你给打印文本加上 %c 那么 console.log 的第二个参数就变成了 CSS 规则!
console.log('%ctest','font-size:30px;color: red;') // test
7. 实时表达式
点击 console 面板 "眼睛" 按钮, 添加实时更新的表达式.
三, Network
1. Request initiator 显示调用堆栈信息
在 Network 面板上打开 initiator 列, 请求发出后, 将显示完整的调用堆栈和文件.
2. 过滤请求
打开 network 面板沙漏图标, 在 Filter 输入框输入过滤规则可实现请求列表过滤. 支持以下规则:
文本: PNG
正则:/.*.[cj]s+$/
排除:-main.CSS
域名: domain:raw.githubusercontent.com
3. 自定义请求表
在请求列表表头右键可配置请求表.
4. 重新发送 XHR
在 XHR 请求右键 - Replay XHR 可重新发送请求.
5. 复制请求
在请求右键 - copy 可复制请求为指定格式.
四, Element
1. h 隐藏元素
选中元素, 按 h 可隐藏元素.
2. 展开所有子节点
在元素右击菜单中选择 expand recursively, 或者按住 option 按键点击元素.
3. 样式面板中的编辑器
插入样式规则的按钮
Shadow editor 阴影编辑器
Timing function editor 定时函数编辑器
颜色选择器
五, Drawer
Drawer 是一组平行的选项卡, 被隐藏在主窗口之下.
1. 打开 Drawer - 按 esc
2. Sensors (传感器)
可模拟传感器.
3. Changes
查看在开发者工具中的修改内容, 类似于 diff.
4. Performance monitor
性能面板, 可查看 CPU 使用量, node 数量等.
5. ...
以上内容从掘金小册《你不知道的 Chrome 调试技巧 - dendoink》整理得出, 需要了解更多细节可自行购买学习.
参考: Chrome 开发者工具
来源: http://www.jianshu.com/p/c903e0880f24