一、一些常用的快捷键
- Ctrl + Shift + D：切换DevTools窗口的布局（下右）
- 切换DevTools选项卡
- Ctrl + [ 或 ]： 向左和向右
- Ctrl + 1 到 9：(可能需要DevTools>Settings>Preferences>Appearance中打开)
二、便于开发的小技巧
- 遇到bug需要同事帮忙时，可将报错信息保存为文件发送，右击报错信息，
找到‘save as’即可 - 使用控制台自带的command面板，可以实现全屏截图、节点截图、控制台背景切换、面板布局切换，这篇文章说的很详细
你不知道的chrome调试技巧.
若上述文章需付费，点击此链接即可.
三、console中的一些操作
- $0、$1
在控制台的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。
$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，一直到 $4 - $_ 是对上次执行的结果的 引用 ：
- $i命令
现在的前端开发过程，离不开各种 npm 插件，但你可能没有想过，有一天我们竟然可以在 Dev Tools 里面来使用 npm 插件！
如果你只是想玩玩新出的 npm 包，现在不用再大费周章去建一个项目测试了，只需要通过 Chrome插件:Console Importer ，快速的在 console 中引入和测试一些 npm 库。
eg：
运行 $i(‘lodash’) lodash 了
- console.log的条件断点
你可以通过以下集中方法添加条件断点：
（1）右击行号，选择 Add conditional breakpoint…(添加条件断点)
（2）右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
然后输入一个执行结果为 true 或者 false 的表达式。
四、element中的一些操作
- H: 隐藏／显示元素
- Ctrl + Shift + Z: 撤销所有修改
CMD + Z: 撤销上次修改 - 展开所有的子节点: expand recursively命令（右击即可找到）
五、network的一些操作
- 重新发起一个请求（别再刷新页面啦）
- 请求过滤
这里只记录了一些博主需要或没有接触的东西，如果小伙伴又不懂的地方，请看这里，有大量详细的介绍，本文也是借鉴于此
你不知道的chrome调试技巧.
若上述文章需付费，点击此链接即可.