vscode无法直接截获网络请求，必须通过浏览器devtools的network面板操作；live server可绕过file://协议限制，启动本地http服务供浏览器访问。
VSCode 本身不能直接运行 HTML 并截获网络请求
VSCode 是编辑器，不是浏览器，它没有内置的网络栈，也无 DevTools。你看到的“在 VSCode 中打开 HTML”（比如右键 Open with Live Server）只是用系统默认浏览器或指定浏览器打开文件，真正的页面渲染、JS 执行、网络请求都发生在浏览器里——所以截获请求这件事，必须交给浏览器完成，VSCode 只能辅助启动和调试流程。
用 Live Server 启动本地服务，避免 file:// 协议限制
直接双击 HTML 文件用 file:// 协议打开时，浏览器会禁止跨域请求（包括 fetch、XMLHttpRequest），连本地 JSON 文件都可能被拒。Live Server 把文件跑在 http://127.0.0.1:5500/ 这类本地 HTTP 服务上，绕过同源策略基础限制。
- 安装插件：
Live Server（作者 Ritwick Dey） - 右键 HTML 文件 →
Open with Live Server，VSCode 底部状态栏会显示端口号 - 确保你的 JS 请求地址是相对路径（如
./api/data.json）或完整http://地址，别写file:/// - 如果后端是本地 Node/Python 服务，注意端口是否冲突（Live Server 默认 5500，后端建议用 3000/8000 等）
在 Chrome/Firefox 中打开 DevTools 截获请求
所有网络请求的捕获、查看、重发、禁用缓存等操作，必须在浏览器 DevTools 的 Network 标签页中进行。VSCode 无法替代这个环节。
- Live Server 启动后，自动在默认浏览器中打开页面；没自动开？复制地址栏 URL（如
http://127.0.0.1:5500/index.html）手动粘贴进 Chrome - 按
F12或Ctrl+Shift+I（Win/Linux）/Cmd+Option+I（Mac）打开 DevTools - 切到
Network标签页 → 刷新页面 → 所有请求（HTML、JS、CSS、fetch/XHR、图片等）都会列出 - 勾选
Disable cache（左上角），防止 304 缓存干扰调试 - 点击某条请求 → 查看
Headers（请求头/响应头）、Preview（JSON 格式化预览）、Response（原始响应体）
需要拦截并修改请求？得用浏览器扩展或代理工具
DevTools 只能“观察”和“重发”，不能实时拦截、改写请求头或响应体。真要改请求（比如加 token、mock 返回），有两个主流方案：
-
浏览器扩展：装
Requestly或ModHeader，可规则化修改请求头、重定向 URL、返回 mock JSON -
本地代理：用
Charles Proxy或开源的mitmproxy，配置浏览器代理为127.0.0.1:8888，就能抓包、断点、重写——但要注意 HTTPS 需装根证书，且 VSCode 本身不参与此链路 - 别指望 VSCode 插件实现完整拦截：目前没有可靠插件能接管浏览器网络栈；所谓“Network Monitor”类插件，只是调用浏览器
chrome.devtools.networkAPI 的简化前端，仍依赖 Chrome 实例
真正卡住人的地方，往往不是不会开 DevTools，而是忘了关缓存、用了 file://、或者误以为 VSCode 自己能发请求——它连 fetch 都不执行，只负责把文件扔给浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
