使用Live Server扩展在VSCode中运行HTML文件，并通过浏览器开发者工具的Network面板监控页面加载过程中的各类网络请求，包括CSS、JS、图片、AJAX及WebSocket等，结合Preserve log、过滤器和禁用缓存等功能提升调试效率。
在 VSCode 中直接运行 HTML 文件时，默认并不会提供类似浏览器开发者工具那样的网络请求监控功能。但你可以通过一些技巧和工具组合，来查看页面加载过程中的网络请求情况。
使用 Live Server 扩展配合浏览器开发者工具
VSCode 本身不内置网络请求分析功能，最实用的方式是结合 Live Server 扩展与浏览器的开发者工具：
- 安装 VSCode 的 Live Server 扩展（由 Ritwick Dey 开发）
- 右键点击你的 HTML 文件，选择 “Open with Live Server”
- 页面会在默认浏览器中打开
- 按下 F12 或 Ctrl+Shift+I 打开开发者工具
- 切换到 “Network” 标签页，刷新页面即可看到所有网络请求
监控哪些类型的请求？
在 Network 面板中，你可以查看以下资源的加载情况：
- HTML 页面自身请求
- CSS 和 JavaScript 文件的加载
- 图片、字体等静态资源
- AJAX 请求或 Fetch 调用（如果你的页面有 JS 网络通信）
- WebSocket 连接（如有）
提高调试效率的小技巧
为了更清晰地分析请求，可以这样操作：
立即学习“前端免费学习笔记（深入）”；
- 勾选 “Preserve log” 以保留跨页面跳转的日志
- 使用过滤器只看特定类型请求（如 XHR、JS、Img）
- 查看每个请求的状态码、耗时、响应内容和请求头信息
- 启用“Disable cache”防止缓存干扰测试结果
基本上就这些。VSCode 负责快速启动本地服务，真正的网络请求分析还是要靠浏览器的开发者工具。这种组合方式既轻量又高效，适合前端开发日常调试。
