Chrome开发者工具的一些撩骚技

对于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

  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章