哪些不为人知的实用chrome开发工具功能

网上有很多很全面详细的介绍,但是我觉得其实许多功能我们正常的开发并用不到,这里我只介绍一些我们开发过程非常实用,但是平时都不知道的功能。

all
这个基本上是我们前端工程师明天都会看到的界面,也就是我们的工地,金矿。上面标的1,2,3,4,5。就是我要介绍的一些功能。

  1. 在element界面,我们最常用的就是查看/修改dom结构,查看/修改css样式,等等。其实我们还可以给dom节点打断点。那么给没有逻辑的dom节点打断点,有什么作用呢?
    有三个非常实用的作用:监听子节点变更,监听当前节点属性变更,监听当前节点移除
    最常用用到的场景就是当遇到莫名其妙dom节点消失了,或者dom节点属性变更,又不知道是哪里的js造成的。此时用这个功能,就能非常快速的定位问题。
    element

  2. 在network界面,可以查看各种资源数据的请求。但是当请求数量过多的时候,很不利于查看。幸好chorme network有强大的过滤功能。可以在图中1的位置选择过滤出想看的资源请求,也可以在边上的输入框内进行更加准确的搜索。
    可以在图中2的位置选择模拟网络模式(之前版本只有模拟手机界面才有这个功能),模拟3G,2G,断网等等的情况。
    在勾选图中4的preserve log的功能,能在页面刷新的情况下,依旧显示之前的请求信息。可以用来定位有些地址打开就302重定向了,根本看不到第一次请求是怎么回事的问题。同理console界面中的preserve log也是相同的效果。
    network

  3. 在source界面,可以查看源文件并且打一些断点调试。图中箭头所指的snippets标签页,在这个下面可以自己写一些js片段,用来测试或者纪录。因为在浏览器中,所以调试和开发非常自然。当然可以写一些es6的语法。
    source

  4. 在resource界面,可以查看在当前域名下local storage, session storage, cookie等存储情况,当然也可以删除缓存。
    resource

  5. 在settings界面,有一个选项一定要勾选,那就是 Disable cache (while DevTools is open)在打开devtools的情况下,刷新是不会采用缓存资源的。
    setting