Chrome浏览器开发者工具使用

1 基础设置

1.1 打开方式

1. 右键 > 检查
2. 设置 > 更多工具 > 开发者工具
3. 快捷键 [F12] / [Ctrl+Shift+I]

1.2 布局设置

1.3 改为中文

1.4 页面介绍

• 保留日志 Preserve log
  保留操作过程中所有的包。
  示例：访问http://testingedu.com.cn:8081/inter/index.html，使用Will/123456登录。
  
• 停用缓存 Disable cache
  

2 抓包

2.1 基础概念

包：网络包，网络上信息传递的数据单元。
协议：Tcp/Ip, Http, Socket, Soap, Restful, Http=Http+ssl
抓包：抓取然间网络传输的包

2.2 怎么抓想要的包

步骤：清空 > 进行对应操作（一般来说只会操作对应的包） > 停止 > 从名字取分析

2.3 怎么看懂包（HTTP）

1. URL ：统一资源定位符（包的服务器地址）
   组成：协议://主机地址/路径（接口名）
   
2. 参数：客户端传递给服务器的信息
   
3. 请求头：请求需要带上的验证信息
4. 响应：服务器处理的结果
5. 响应头：本次请求产生的验证信息，后续请求可能要用到（带在请求头里面）

2.4 运行接口

复制接口：右击接口 > Copy > Copy as cURL(bash)
运行接口：打开Postman > 点击Import > 选择Raw text，粘贴接口 > Continue > Import > 点击Send发送请求

2.5 Bug定位分析

• 信息传递
  前端—互联网—后台（保证信息没有传错：看参数）
  后台—互联网—前端（保证前端结果和后台结果一致：看响应）

• Bug分析示例1
  问题：访问http://testingedu.com.cn:8081/inter/index.html，使用will%/123456登录，发现点了登录按钮无反应。
  
  分析：前端：后台报错时，前端没有提示；后台：后台500异常，附带截图

• Bug分析示例2
  问题：http://testingedu.com.cn:8081/inter/index.html特斯汀学院logo图片显示错误。
  
  分析：前端URL地址填错，导致404错误。（若URL地址正确却没显示，则可能是后台/前端没有图片）

3 弱网设置

4 录制自动化脚本