Chrome F12之测试利器

Sayings:

工欲善其事，必先利其器

在测试的过程中你肯定遇到过开发跟你说：把接口地址发过来，把请求参数发过来，看下接口返回了没，看下js是不是报错了等等

那么如何去查看这些东西呢？可能解决这些问题的方法有很多很多种，那么我们今天就挑其中的一种来介绍。

浏览器三巨头IE，FireFox，Chrome中的chrome的控制台。

话不多说，直接进入正题。

我们打开chrome浏览器控制台的快捷键是F12

可能大部分人都知道，那就说给哪些不知道的人听吧~

一、首先认识一下这些按钮：

先来看这张图最上面的一行是一行功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看

1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个元素时，箭头按钮会变成选择状态。

2.设备图标：点击它可以切换到不同的终端进行测试模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择。

有了这个功能那么当我们没有移动端测试机的时候我们就可以利用chrome控制台来模拟移动端进行测试，还可以选择不同的机型进行兼容性测试，是不是感觉狠方便？

3.Elements 功能标签页：用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息。

下图我们可以看到当我鼠标选择id 为lg_tar的div元素时，右侧的css样式对应的会展示出此id 的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效， 灰色的element.style样式同样可以进行添加和书写，唯一的区别是，在这里添加的样式是添加到了该元素内部。

实现方式即：该div元素的style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后，再到代码中进行修改。

对应的样式：

盒模型信息：

ps：当我们想要测试一些页面上显示的长度的时候，我们就可以借助chrome的控制台来进行测试啦！

比如说下图，我们要测试账户超长显示的场景：

那么我们如何借助控制台实现呢？

点击控制台左上角的箭头按钮，再点击@1定位到@2，然后双击@2进行编辑，输入你想要的场景，如下图就完成啦！

4.Console控制台：用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，打印console.log信息外，还有很多相关的功能，下面简单介绍几个：

a: 一些对页面数据的指令操作，比如打断点正好执行到获取的数据上，由于数据都是层层嵌套的对象，这个时候查看里面的key/value不是很方便，即可用这个指令开查看，obj的json string 格式的key/value，我们对于数据里面有哪些字段和属性即可一目了然

b: 除了console.log还有其他相关的指令可用

5.Network 网络请求标签页：可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。

所有的资源：

以上我选择了All，就会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，然后刷新一下，则我们可以分析相关的请求信息；

请求相关的信息：

打开一个请求，可以看到它的请求头信息，是一个GET请求，参数有哪些，还可以预览它的返回的结果数据，这些数据的使用和查看有利于我们很好的和后端工程师们联调数据，也方便我们前端更直观的分析数据；

预览请求的数据：

6.Timeline标签页可以显示JS执行时间、页面元素渲染时间；

7.Profiles标签页可以查看CPU执行时间与内存占用；

8.Resources标签页会列出所有的资源，以及HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除 ；

9.Security标签页可以告诉你这个网站的安全性，查看有效的证书等；

10.Audits标签页可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告；

tips

每天分享一篇最干的干货

有的人喜欢创造世界，他们做了程序员

有的人喜欢拯救世界，他们做了测试员

那，你呢？