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

每天分享一篇最干的干货

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

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

那,你呢?

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180105G0L3CF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券