启动Chrome时启用日志

在谷歌浏览器中查看网络请求，主要通过 开发者工具（DevTools） 实现,以下是几种常用方法：

快捷键打开开发者工具

• Windows/Linux：按 F12 或 Ctrl + Shift + I
• Mac：按 Cmd + Option + I

通过菜单打开

1. 点击浏览器右上角的 三个点菜单（⋮）
2. 选择 “更多工具” → “开发者工具”

快速查看网络请求

• 打开开发者工具后，选择 “Network”（网络） 选项卡
• 刷新页面或进行页面操作，即可看到所有网络请求

Network面板详解

主要功能区域：

• 请求列表：显示所有请求（按时间顺序）
• 筛选器：可按类型筛选（XHR/JS/CSS/图片等）
• 控制按钮：
  • ✅ 记录开关
  • 🚫 清空记录
  • 📷 禁用缓存
  • ⏱️ 网络限速模拟
• 时间轴：显示请求时间线

查看单个请求详情：

点击任意请求可查看：

• Headers：请求头和响应头
• Preview：响应预览
• Response：原始响应数据
• Timing：请求时间分析

实用技巧

保留请求记录：

勾选 “Preserve log”，页面跳转时不清空记录

复制请求信息：

右键点击请求 → 选择：

• Copy as cURL（复制为cURL命令）
• Copy response（复制响应内容）
• Save as HAR（保存为HAR文件）

筛选特定请求：

• 在筛选框输入关键词
• 或使用 XHR、JS、Img 等按钮快速筛选

监控API请求：

特别关注 XHR/Fetch 类型的请求，这些通常是API接口

其他查看方式

命令行方法：

扩展程序：

• Postman Interceptor：拦截并导入到Postman
• HTTP Trace：更详细的请求分析

移动端调试

• 连接手机后，在DevTools中点击 “设备切换” 图标
• 或使用 chrome://inspect 检查移动设备页面

提示

• 按 Esc 键可快速打开/关闭开发者工具
• 使用 Ctrl + R（Mac：Cmd + R）重新记录请求
• 右键点击页面元素 → “检查” 可快速定位相关请求

这些工具对前端开发、API调试和性能优化非常有帮助！