测试接口的使用一之Chrome DevTools使用一

302 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第22天,点击查看活动详情

1、分为抓包工具和接口发送工具两类。常用的抓包工具有Chrome开发者工具、Fiddler、Charles、Wireshark、tcpdumps等。常用的接口发送工具有Postman、JMeter、Soup UI Pro等。

Chrome开发者工具

Chrome开发者工具是Chrome浏览器自带的一款开发调试工具,可以查看页面元素,调试JavaScript脚本,网络抓包,进行网页性能诊断等非常强大的功能,并且使用非常方便。

在在页面上按Ctrl+Shift+I或Command+Option+I便可以快速打开Chrome开发者工具,如图下图所示。

image.png

Chrome开发者工具包含9个面板,从左至右依次为Elements:元素面板,Console:JavaScript控制台,Sources资源面板,Network:请求信息面板,Performance:网站声明周期性能面板,Memory内存占用分布面板,Application:本地存储、会话管理等应用面板,Security安全验证面板,Audits:综合审计面板,本节重点讲解用于查看请求的Network:请求信息面板。

  • Network 请求信息面板

Network请求信息面板从上到下分为工具栏、过滤器、请求列表和状态栏4个部分

工具栏中各按钮、选项功能说明。

image.png:开启或者关闭请求捕获功能

image.png:清空请求列表

image.png:显示或者隐藏过滤器工具栏

image.png:搜索请求

Preserve log:当前页面跳转是保持之前记录

Disable cache:禁用缓存

Online:网络选项,可以模拟离线或者弱网

image.png:导入请求HAR包

image.png:导出请求HAR包

image.png:额外设置,比如使用大请求行,安帧分组,显示概览和捕获页面加载截图