Chrome开发者工具

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

Network面板

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