vscode 本身不能直接抓包，需借助浏览器 devtools 或代理工具；其调试器不捕获 fetch/axios 等网络请求，因这些由底层发起而非 js 调用栈；联动依赖 sourcemap 和调试配置对齐，或使用 mitmproxy 等外部代理。
VSCode 本身不能直接抓包，它没有内置的 Network 面板；你看到的“VSCode 抓包”实际是借力浏览器 DevTools 或通过调试器间接观察请求。
为什么 VSCode 的 Debug Console 看不到 fetch / axios 请求
VSCode 的调试器（如 Node.js 或 Chrome 调试扩展）默认只捕获 JS 执行上下文和断点信息，fetch、axios、XMLHttpRequest 这类网络调用由浏览器或运行时底层发起，不经过 JS 调用栈出口，所以不会自动出现在 Debug Console 或断点停靠点里。
- Node.js 环境下：需用
http/https模块的request事件或第三方库（如node-http-mitm-proxy）手动拦截 - 前端项目（如 React/Vue）在浏览器中运行：真正抓包必须打开浏览器的
Network面板，VSCode 只能配合源码断点定位触发位置 - VSCode 的
Debugger for Edge或Debugger for Chrome扩展只是把浏览器 DevTools 的调试能力桥接到编辑器，不复制其 Network 功能
如何让 VSCode 断点和浏览器 Network 面板联动
目标不是让 VSCode 显示请求列表，而是快速从网络请求跳转到发起它的源码行 —— 这需要 sourcemap 和调试配置对齐。
- 确保构建产物包含有效的
sourceMap（如 Webpack 的devtool: 'source-map'或 Vite 的build.sourcemap: true） - 在
launch.json中启用"url": "http://localhost:3000"并设置"webRoot"指向项目根目录（否则断点无法映射到原始 TS/JS 文件） - 浏览器 Network 面板里右键某条请求 →
Reveal in debugger（部分 Chrome 版本支持），或手动在 Headers →Initiator列点击文件名，会自动在 VSCode 中打开对应源码并高亮调用行 - 如果 Initiator 显示为
other或空白，说明请求来自动态代码（如 eval、内联 script）或 sourcemap 未加载成功
替代方案：用 Charles / mitmproxy + VSCode 联调
当需要修改请求/响应、模拟弱网、或调试后端接口时，外部代理工具更可靠，VSCode 可配合查看日志或发起测试请求。
- 启动
mitmproxy后，在 VSCode 终端运行curl --proxy http://127.0.0.1:8080 http://example.com，即可在 mitmproxy 界面看到明文流量 - VSCode 中安装
REST Client插件，写一个.http文件，加上@proxy = http://127.0.0.1:8080，后续所有GET/POST请求都会经代理，方便比对 - 注意 Node.js 默认不走系统代理，需显式设置环境变量：
process.env.HTTP_PROXY = 'http://127.0.0.1:8080'，否则axios或node-fetch不会经过 mitmproxy - HTTPS 抓包需在 mitmproxy 中导出 CA 证书，并在系统/浏览器中信任；VSCode 自身不校验证书，但 Node.js 运行时若报
DEPTH_ZERO_SELF_SIGNED_CERT，需加process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'（仅开发环境）
真正卡住人的往往不是“怎么开面板”，而是 sourcemap 路径错位、代理未生效、或误以为 VSCode 调试器该承担浏览器的职责。Network 数据永远在运行时环境里，VSCode 是你的代码地图和命令入口，不是流量管道本身。
