软件测试——浏览器F12必备知识点-摩杜云开发者社区

引言

测试人员测试过程中，经常需要通过抓包来初步定位bug的来源。对于Web端的测试，可以直接利用浏览器中的F12开发者选项，就能进行网站界面测试、调试，分析网页出现的问题，查看html元素，查看响应事件等方面。

一、调出F12开发者工具面板

网页打开一个页面，有两种方式可以调取开发者工具面板，第一种是直接点击键盘的F12按键

软件测试——浏览器F12必备知识点_状态码

第二种可以鼠标右键，选择检查

软件测试——浏览器F12必备知识点_客户端_02

二、工具面板主要功能

面板主要功能模块如下：

软件测试——浏览器F12必备知识点_服务端_03

1. 元素（Elements）：查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

2. 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。

3. 源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

4. 网络（Network）：从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），测试人员重点要掌握该功能模块。

三、网络面板

1.窗格

软件测试——浏览器F12必备知识点_服务端_04

1）选择元素

软件测试——浏览器F12必备知识点_状态码_05

点击后进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

2）开启/停止录制网络日志

软件测试——浏览器F12必备知识点_客户端_06

默认开启，会在面板进行网络连接的信息记录，关闭后则不会记录。

3）清除

软件测试——浏览器F12必备知识点_服务端_07

点击后清除网络请求列表。

4）过滤

过滤网络请求，点击打开过滤，控制Requests Table具体显示哪些内容。

5）保留日志

软件测试——浏览器F12必备知识点_状态码_08

重新加载当前页面的时候，之前的请求资源信息将会保留。

6）停用缓存

软件测试——浏览器F12必备知识点_客户端_09

启动开关时页面资源不会存入缓存，可从Status栏的状态码看文件请求状态。

7）网络连接开关

软件测试——浏览器F12必备知识点_服务端_10

可设置限速模拟各种网络环境下的不同用户访问本页的情况。

四、请求资源面板

1.名称

请求资源名称的URL路径，点击某个资源的名称，可以查看该资源的详细信息，根据选择的资源类型显示的信息不一样。

软件测试——浏览器F12必备知识点_客户端_11

2.标头

http头信息

软件测试——浏览器F12必备知识点_服务端_12

1）常规

请求网址：资源的请求url （ URL和域名的区别：域名就是到.com .net .org就结束了；URL就是除了域名还有右面的/asl;dajs;dlfsdf.html 一长串）。

请求方法：HTTP 请求方法。

状态代码：200（状态码） OK（原因短语）、 301 - 资源（网页等）被永久转移到其它URL 、 404 - 请求的资源（网页等）不存在、 500 - 内部服务器错误。

远程地址：请求的远程地址。

引荐来源网址政策：首部用来监管哪些访问来源信息，会在Referer中发送应该被包含在生成的请求当中。

2）响应标头

Connection：keep-alive ——维护客户端和服务端的连接关系

Content-Encoding：gzip ——压缩编码类型

Content-Type：text/html ——服务端发送的类型及采用的编码方式

Date：Tue, 4 Feb 20 21 09:38:28 GMT ——客户端请求服务端的时间

Server：nginx/1.2.4 ——服务端的Web服务端名

Transfer-Encoding：chunked ——分块传递数据到客户端

Vary：告诉下游代理是使用缓存响应还是从原始服务器相应

3）请求标头

Accept:text/html ——客户端能接收的资源类型

Accept-Encoding:gzip, deflate ——客户端能接收的压缩数据的类型

Accept-Language:en-US, zh ;q=0. 9 ——客户端接收的语言类型

Connection:keep-alive ——维护客户端和服务端的连接关系

Cookie: ——客户端暂存服务端的信息

Host:ev.csdn.net——连接的目标主机和端口号

Referer: ——来于哪里

3.预览

根据所选的资源类型（JSON、图片、文本）显示相应的预览。

软件测试——浏览器F12必备知识点_服务端_13

4.响应

显示HTTP的Response信息

软件测试——浏览器F12必备知识点_客户端_14

5.时间

显示资源在整个请求生命周期过程中各部分花费的时间。测试过程中，可以通过查看此处的时间来知晓接口响应时间。

软件测试——浏览器F12必备知识点_客户端_15

五、定位前后端bug

1.前端问题

1）console有js报错

点击页面上的某个按钮无反应，在控制台（console）处看到js报错，并在网络（Network）中没有前端对后端的功能接口发起调用，点击按钮无返回数据，一般为前端的bug。

2）参数与规定不符

请求参数问题。若要求请求参数不能为空，但接口实际请求的参数为空，则为前端的bug，或者参数错误，也是前端的bug。

软件测试——浏览器F12必备知识点_状态码_16

3）参数导致request url错误

对比接口文档，如果参数不一致，request url错误，就是前端的bug

2.后端问题

1）状态码500

通过接口返回值可以看到所有返回数据，如果点击某个按钮无反应，在控制台（console）处看到没有js报错，并且在网络（Network）中看到请求返回的状态码是500，那么就是后端的bug。

软件测试——浏览器F12必备知识点_客户端_17

2）返回值错误

对比接口文档，返回值内容为空或者返回值不对，也是后端的bug。