【Python接口自动化测试】（6）Chrome开发者工具

Chrome开发者工具

• Elements: HTML元素面板，用于定位查看元素源代码
• Console: js控制台面板，js命令行，查看前端日志
• Sources: 资源面板，用于断点调试js
• Network: 请求信息面板，查看请求及响应信息
• Timeline: 时间线面板，记录网站生命周期内所发生的各类事件
• Profiles: 事件详情面板
• Application: 本地存储，Session存储等资源信息
• Secuity: 判断当前网页是否安全
• Audits: 网络性能诊断

1. Console: 外观及功能控制

• 录制：记录或停止记录请求
• 清空： 清空所有请求
• 抓取快照：按帧捕获屏幕事件
• 过滤: 请用关闭过滤功能
• 搜索：搜索请求
• Group by frame：按框架分组
• Preserve log：页面重载时保留请求
• Disable cache：禁用缓存
• Offline：断网及弱网模拟

2. Filters: 请求过滤器

3. Overview: 资源时间轴

4. Requests Table: 请求列表

• Name: 资源名称
• Status: HTTP状态码
• Initiator: 请求源
• Size: 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
• Timeline: 显示所有网络请求时间状态轴

5. Summary: 请求总数，数据传输量，加载时间信息

• DOMContentLoaded：页面上DOM完全加载并解析完毕
• load：页面上所有DOM、CSS、JS、图片完全加载完毕

导出请求：

• 右击请求 -> Copy -> Copy as fetch / Copy as cUrl