介绍一下 DevTools 的一些好用的技巧，它能够很好地帮助你提高生产力和解决问题的能力。

1、打开命令行

或者使用：快捷键  Ctrl + Shift + P  (Mac： ⌘ + Shift+ P )

 命令行可以做很多事情，包括但不限于截图、更换主题等

2、控制 DevTools 展示位置

3、快速查看 Element 状态

你可能会在开发中遇到这么一个场景：给一个元素设置了多种状态下的样式，想查个某个状态，但是手动去改变状态的话就有点麻烦，这时候这个 Tips 就能帮你解决这个问题。

 可以从上图中看到，无论你想看到元素的何种状态下的样式，都只需要勾选相对应的状态就可以了

4、快速定位 Element 位置

在长页面情况时，如果想查看的元素不在当前窗口的话，你还需要滚动页面才能找到元素，可以用下面这种方式快速定位

 当点击后页面就会自动滚动到元素所在的位置

5、打印并查看，选择过的 DOM 元素

不知道你是否遇到过这样的问题，找不到之前查看过的 DOM 元素在哪里了，需要一个个去找这就有点麻烦了，这时候你就可以用下面这种方式，在控制台打印出对应的元素

在 Console 中 $ 就是 document.querySelector 的缩写，我们可以通过 $0 来找到上一次查看过的 DOM 元素，$1 就是上上次的元素，之后以此类推。

当你点击这个选项时，页面立马会跳转至元素所在位置，并且 DevTools 也会变到 Elements 标签。 

6、对单个 DOM 截图

有时候开发时需要对单个DOM 进行讨论查看

点击之后就会生成选中 DOM 的截图 

或者选中DOM，使用命令行截图

7、对整个网页截图

快捷键  Ctrl + Shift + P  (Mac： ⌘ + Shift+ P )，输入 full

 对当前网页截图不包括书签和网址Tab

8、Network 过滤网页请求

Network 面板中的过滤器输入框接受字符串或正则表达式，对应显示匹配的请求。 但是你也可以使用它来过滤很多属性。

例如指定的请求发放、指定请求地址等

 9、Network 控制请求网速

对于调试某些资源获取速度、白屏页面显示等

 10、重新发送接口的请求

为了获取新数据，可能需要重新请求接口。除了刷新页面，还可以用这种方法