对于web开发领域的从业者来说，除了F5（刷新），用的最多的快捷键就是F12（开发者工具）了。

今天无意间看到了老姚的博客，知道了一个神奇的网址，才知道chrome开发者工具还有如此之多的技巧，怎一个骚字了得，接下来就让我们看看一些我以前不是很了解而且又很实用的技巧。

1、曾几何时，为了调试伪类样式，而不停的刷新页面。

2、还在苦于找各种截图工具？软件or插件？

3、还在傻傻的使用QQ截图等工具一像素一像素挪动就为了截取一个节点的缩略图？[快捷键Windows: Ctrl + Shift + P, Mac: Cmd + Shift + P）]

4、想查看一个节点都绑定了些什么事件？

5、各种log混杂在一起找不到重要信息？

6、想直接从浏览器调试node代码？

7、直接使用浏览器检测未使用的css定义

8、自定义network中的响应头列

9、想知道在没有请求某个资源的请求下网页是什么样子的？

10、想知道，某个请求的触发代码写在哪？Initiator！！

11、network中资源请求太多，干扰自己的关注点？过滤一下吧

12、联调接口有问题，后端老哥总管你要response？

13、想在别的软件中测试一下接口，fetch, curl之类的不会写？

14、打个断点只想在某个特定条件下执行？

其他的技巧还有很多，这里就不一一列举了，有兴趣的同学可以自己访问http://umaar.com/dev-tips/ 去看，到目前为止，大概记录了170个技巧，后期可能还有更新，全看一遍，还是需要一定耐心的。

开发者工具的功能确实挺多的，还有待我们去发掘去学习，对我们日常的工作也会有很大的帮助。

文末，希望大家可以再去看看官网关于开发者工具这块儿的教程：

https://developers.google.com/web/tools/chrome-devtools/

http://www.css88.com/doc/chrome-devtools/ (中文)

部分摘自：https://juejin.im/post/5af53823f265da0b75282b0f