VSCode 无法直接查看 HTTP 请求日志，需借助外部工具或扩展：可用 JSON 日志文件+自动保存查看；用 ms-vscode.vscode-edge-devtools 调试 Edge 浏览器 Network 面板；或用 mitmproxy 捕获全流量并以日志形式在 VSCode 中分析。
VSCode 本身不提供类似浏览器 DevTools 的 Network 面板，无法直接查看 HTTP 请求日志——它不是调试运行时网络流量的工具，而是编辑器。想在 VSCode 里“看网络请求”，必须借助外部工具或扩展，并把日志导出/注入到 VSCode 中查看。
用 curl 或 fetch 日志文件 + VSCode 内置预览
如果你的后端（如 Node.js、Python Flask）或前端（如 React/Vite）主动将请求信息写入日志文件（例如 requests.log），VSCode 就能高效查看：
- 确保日志格式为 JSON 行格式（每行一个 JSON 对象），例如：
{ "method": "GET", "url": "/api/users", "status": 200, "ts": "2024-05-20T10:30:45.123Z" } - 用
tail -f requests.log实时追加写入，再用 VSCode 打开该文件；开启Auto Save+Files: Auto Save Delay设为低值（如 100ms），可接近实时刷新 - 安装扩展
JSON Tools或Prettify JSON，右键选择Format Document快速美化单条 JSON（注意：整文件美化可能破坏行日志结构，慎用）
用 ms-vscode.vscode-edge-devtools 扩展调试 Edge 浏览器网络请求
这是目前最接近“在 VSCode 里看 Network 面板”的方案，但仅限调试基于 Chromium/Edge 的网页（含本地 HTML、localhost 服务）：
- 安装扩展
ms-vscode.vscode-edge-devtools（官方 Microsoft 出品） - 启动你的 Web 服务（如
npm run dev），确保它监听localhost:3000这类地址 - 按
Ctrl+Shift+P→ 输入Edge DevTools: Open Edge DevTools，选择目标页面 - 此时打开的是嵌入式 DevTools 窗口，
Network标签页可用，但注意：它只是远程连接浏览器调试协议（CDP），所有抓包实际发生在 Edge 浏览器进程内，VSCode 不参与捕获 - 刷新页面即可看到请求列表；点击某条请求可查看 Headers、Preview、Response —— 和浏览器原生面板一致
用 mitmproxy + VSCode 查看原始请求流
当需要捕获任意应用（包括桌面客户端、CLI 工具、甚至手机 App）的 HTTPS 请求时，mitmproxy 是更底层可靠的方案，VSCode 可作为日志查看器：
- 安装
mitmproxy：pip install mitmproxy - 启动代理并输出日志：
mitmproxy --mode transparent --showhost --set stream_large_bodies=100k --set console_eventlog_verbosity=debug --set confdir=./mitmconf > mitm.log 2>&1 - 配置系统/设备使用该代理（如
127.0.0.1:8080），然后发起请求 - 日志会包含完整请求头、响应头、部分响应体；用 VSCode 打开
mitm.log，配合正则搜索（Ctrl+Shift+F）快速定位GET /api/或HTTP/2 200 - ⚠️ 注意：
mitmproxy默认不保存完整响应体（防内存爆炸），需手动设--set stream_large_bodies=1m；HTTPS 解密还需在设备上安装 mitmproxy 证书
真正难的不是“怎么在 VSCode 里打开日志”，而是决定日志从哪来、是否可信、是否实时、是否可过滤。浏览器 Network 面板是运行时上下文感知的，而 VSCode 里的文本日志是离线快照——两者定位不同，混用容易误判问题根源。
