chrome调试工具常用的六个小技巧

Chrome的开发者工具是非常强大的的调试工具，这一点程序员们都不会陌生，然而，有一些小的技巧性的功能，能够很大程度上提高开发效率……下面我就来罗列一下

第一个：将代码格式化

CSS或者JS文件上线后一般都是压缩之后的代码，这个时候为了方便查看，你可以点击代码窗口左下角的那个{}标签，chrome会帮你给格式化掉。如下图所示：

第二个：强制DOM状态

很常见，有些HTML的DOM是有状态的，比如A标签，它就会有 active，hover， focus，visited这些状态，chrome来高度这些样式状态，也是非常方便，在分析网页查看网页上的DOM的CSS样式时，我们可以点击CSS样式上的:hov这个小按钮来强制这个DOM的状态。如下图所示（以腾讯PC首页为例）：

第三个：调试动画

在网页中，有动画的元素，是非常普遍的情况，然而，在Chrome的开发者工具中，通过右上角的菜单中的More Tools => Animations 呼出相关的选项卡。于是你就可以慢动作播放动画了（可以点选 25% 或 10%），然后，Chrome还可以帮你把动画录下来，你可以拉动查看动画的过程，甚至可以做一些简单的修改，如下图所示（以腾讯新闻移动网为例）：

第四个：直接编辑网页

在你的console里输入下面命令：然后，你就可以直接修改网页上的内容了，看我怎么操作的，用腾讯移动网底层页为例，如下图所示：

第五个：网络限速

你可以设置你的网络的访问速度来模拟一个网络很慢的情况。甚至还可以自定义网络参数，如下所示：

第六个：抓个带手机的图

这个功能很有意思，这种图在做分享时，放在PPT里也是极好的。

在device显示中，先选择一个手机，然后在右上角选 Show Device Frame，然后你就看到手机的样子了，然后再到那个菜中中选 Capture snapshot，就可以抓下一个有手机样子的截图了。如下图所示（腾讯新闻移动网）：

然后，抓的图是这样的：

最后总结一下：

以上，就是今天要说的chrome调试工具常用的六个小技巧，但凡能提高工作效率的事情，都可以用起来。