几个你不得不知道的chrome开发者工具的使用技巧

前言

作为一个前端,我相信你最常用的浏览器是chrome,那么它自带的开发者工具也许是你常用的一款调试工具,额··也许你并没有真正的了解过它··什么?你不信?好吧,让我给你介绍几个强大到让你颤抖但是你也许从来不知道的使用技巧吧!
如果你也有更强大的使用技巧一定要告诉我哦~我会及时更新滴!

下面我就以我本机chrome版本(mac:50.0.2661.102 (64-bit))为你介绍一下吧!

查看盒模型结构

你一定知道盒模型的概念,有时候在网页过程中如果想快速了解一个dom元素 实际 的内边距啦、外边距啦之类的可以通过一下方式查看:
查看盒模型结构

强大等级:1星

日志保持功能

这个功能在调试多页面跳转很有用,有时候一个错误只有当你点击一个链接才会发生,但是console面板却一闪而过的时候你是时候开启了,与之相同的功能newwork面板也有一个:
日志保持功能

强大等级:1星

dom动画曲线调试

我们都知道在elements标签页能够实时调整css和dom结构来实时预览页面的变化,对我们样式和html结构调整有着很大的帮助,如果你连这个都不知道的话那么我只能说你太low了,现在我要给你介绍一个小功能是对css3动画的实时调整,点开如下图位置:
dom动画曲线调试

点开后,我们打开一个有css3动画的页面:

dom动画曲线调试

然后你就会发现下面的面板会记录这一次的css3动画的情况:

dom动画曲线调试

剩下的事就看你的拉!

强大等级:2星

网速模拟

有时候在分析一些在网络状况不好的情况下网页加载性能的时候特别有用,newwork面板中开发者工具为我们提供了几种网速的模拟情况:
dom动画曲线调试

强大等级:2星

静态资源加载快照

对于newwork我们能够分析出静态资源加载顺序,大小,时长:
dom动画曲线调试

但是你一定想不到开发者工具还给我们准备了一个更加贴心的工具capture screenshots(就是那个小录像机的图标),能够实时记录网页加载在不同时间段的快照,以及这一时刻静态资源加载的情况
静态资源加载快照

强大等级:3星

断点步入排除

对于 Sources面板的断点功能在调试js的时候再合适不过了,不过使用的过程中很多童鞋一定遇到过这种情况,就是在排查问题的时候一步步断点步入不知不觉进入了各种莫名其妙的jquery库或者angular或者vue之类的,让人很苦恼,当然你完全可以打断点有一些技巧使之避免,但是今天我要为你提供一个更好的方法,就是直接使断点步入的时候排除掉这些烦人的公共js库;
那就是blackboxing 翻译过来就是黑盒子功能,打开settings面板,就是设置:
断点步入排除

如图,在input框内填写你要排除的js库的名字,支持正则哦!这样妈妈再也不用担心我进黑盒子了!

免费赠送一个小功能,在断点排查的时候如果遇到压缩js而又没有sources map怎么办?点击最下面的 {} 图标啦~可以格式化代码:

强大等级:3星

所见即所得开发

在页面制作过程中很多同学是不是要在Elements面板调整css样式后再把相应的值粘贴到代码中呢?

现在我告诉你一种更加快捷的开发方式,即在Elements面板调整完css样式后 能够自动同步到你的代码中,这就是开发者工具的Workspace功能,
打开设置,找到Workspace标签页:

然后添加网站域名,如果是跟域名,后面跟/即可:

注意:这一技巧比较难成功,多实验几次,有些同学是java项目,一般tomcat指向的是类似webapp的目录,所以要把文件目录指向这里,如果开启了此功能会对Sourcse面板功能造成影响,大家自己多多体会把!
我本地项目是php项目,我的配置是这样的

然后看一下 修改后的开发感觉:

dom动画曲线调试刷新后没有恢复改之前的样式,还是修改后的颜色,说明我们的css代码也同步修改啦!你的效率是不是刷刷的提升好几倍?

强大等级:4星

结束语

开发者工具的强大是在于各种使用技巧配合使用,这里没有提到timeline功能,是因为我觉得它的使用度比较小,但是功能更加强大,用单独一篇文章分析都不为过
因为本篇文章主要介绍一些大家平时可能会忽略的技巧,不过一些常用的技巧大家也要多加探索琢磨,才能使我们在工作中如虎添翼,提高效率!

《几个你不得不知道的chrome开发者工具的使用技巧》有1个想法

发表评论

邮箱地址不会被公开。 必填项已用*标注