2019-11-06 | Chrome系列 | UNLOCK

Chrome DevTools使用小技巧

一、Chrome DevTools中的network

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

二、代码格式化

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

三、取色和选择

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

四、让Chrome变成编辑器

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

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开发者工具一些小技巧,未完待续。。。

评论加载中

上一页 下一页