web端调试工具的简单使用

今天简单介绍一下web端的调试工具，让测试人员可以从界面简单判断BUG的来源，适用于初步接触测试的人员，专业人员可以绕路

一、调试工具的启用

• 1.快捷打开工具，F12
• 2. 但是有些网站可能会禁用快捷键，这时候就必须手动打开了
     第一种方式：点击右上角的三个点，在下拉菜单中点击 开发者工具 选项
     点击右上角.png
     
     第二种方式：直接在页面右键，在下拉菜单中点击 检查
     点击右键.png

二、调试工具的功能选项

工具TAB.png

针对本公司项目的特性，今天主要介绍几个常用的TAB

1.元素TAB （主要是通过HTML的形式展示页面所有的元素标签）

我们主要使用它修改元素样式的功能，选择你想改变样式的元素，右键之后点击检查，就会快捷选中元素。
选中后还可以右键，点击隐藏或者删除元素，执行后页面上就暂时看不到元素了

选中元素.png

可以在样式子功能下面修改，得到你想要的样式

例1.png

2.控制台TAB （可以查看前端开发人员的调试信息，前提是开发人员开启了此选项）

我们可以查看开发人员的调试信息，还可以直接使用语法，执行浏览器的一些原生功能

例2.png

3.网络TAB （此次主要讲的选项，测试人员和开发人员最常用到的模块，用于测试问题的分析和定位，记录了前后端的交互，方便查找问题是前端还是后端问题 ），主要讲标头，载荷，预览，响应，时间

标头

• 1.http请求消息:请求行(请求方法)、请求头、请求体–客户端发送

• 2.http响应消息:响应行(响应状态码)，响应头，响应体-服务器回应

  
  
  概述.png
• 状态码
  200 (正常状态)，一般不是200的都是后端报错
  404（资源不存在或者地址给错了）（对应我们自己的项目，有可能是前后端版本不统一，前端部署了，后端没部署）
  500 503（表明服务器有问题）500开头的基本都是服务器内部的问题
  301 302 (重定向) 304 （请求的是服务端缓存）

载荷 （主要用于查看参数）

get 请求一般参数在url上，问号后面都是参数

image.png

get载荷.png

post载荷.png

预览和响应

预览和响应都是后台返回的数据，预览是格式化的数据
返回值里面一般也会带code字段，这是后端自定义的业务系统状态码，code为0就是正确的返回了。有可能http状态码为200，但是业务系统返回失败状态码

举个栗子1.png

举个栗子2.png

以下是正确状态的返回

预览.png

时间

正在请求.png

响应时间.png

4.应用TAB （web端存储）

主要分为localstorage / sessionstorage / cookie

应用.png

另外的强刷方式.png

5. 此外，调试工具的另外几个TAB也有很强大的功能，感兴趣的可以深入研究，如内存TAB可以对网页的js对象和dom节点内存拍快照，性能TAB可以对网页的性能进行分析，并生成报告

希望今天的分享对大家有所帮助，谢谢