Chrome DevTools使用小技巧

一、Chrome DevTools中的network

我们可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；

二、代码格式化

当我们在Sources中查看相关文件代码时，有一些文件(css/js)会被minify(压缩)掉，此时我们可以点击窗口左下角的“{}”标签，就可以格式化我们的代码，方便查看。

三、取色和选择

平时开发会用到一些取色器的软件，或者vscode之类编辑器下载取色的插件来取色，但开发者工具已经给我们准备了，我们只需要点击某元素颜色的框框，就会弹出取色器，点击取色器就可以取色。

四、让Chrome变成编辑器

如果我们想单纯修改网页中的文字，我们可以在编辑器上修改，也可以审查元素，编辑源代码，但我们可以这样做。打开console，输入：

< 大专栏  Chrome DevTools使用小技巧table>

1

document.body.contentEditable=true

你会发现，网页中的文字你可以随意更改。

五、以表格的形式输出数组

假设我们现在定义一个数组，如下：

1	var mtArr = [{a:1,b:2},{a:1,b:2,c:3},{a:1,b:2,c:3,d:4}]

Chrome会以文本的形式返回一个数组对象给我们，这时如果我们需要，我们可以console.table(mtArr))让chrome以表格的方式输出我们的数组的值。

六、动画Animations

我自己的博客上都会有一些动画效果。在Chrome的开发者工具中，通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。于是你就可以慢动作播放动画了（可以点选 25% 或 10%），然后，Chrome还可以帮你把动画录下来，你可以拉动动再画的过程，甚至可以做一些简单的修改。

以上就是Chrome开发者工具一些小技巧，未完待续。。。