VSCode 本身不直接运行前端代码，需依赖外部服务提供 HTTP 环境和浏览器执行 JS；Live Server 适合纯静态页，npm run dev 适用于含构建工具的项目，调试必须基于 http:// 协议而非 file://。
VSCode 本身不直接运行前端代码，它靠外部服务提供 HTTP 环境、靠浏览器执行 JS —— 没有本地服务器，fetch、localStorage、Service Worker 都会失败，file:// 协议下绝大多数现代 API 不可用。
Live Server 插件适合纯 HTML/CSS/JS 静态页
这是最快上手的方式，但仅限不需要构建、不依赖 Node.js 脚本的简单页面。
- 必须安装
Live Server（作者 Ritwick Dey），不是同名但不同作者的其他插件 - 右键打开的是
index.html，不是.js或.css文件；否则“Go Live”按钮不出现 - 默认端口是
5500，如果被占用，它会自动换到5501，但不会提示 —— 你得看右下角状态栏实际地址 - 修改文件后自动刷新，但只刷新当前标签页；如果开了多个 tab，其他页不会同步更新
- 不支持
import语法（ESM）：浏览器原生 ESM 需要type="module"+http://，而 Live Server 提供的就是这个环境，所以可以跑，但路径必须写对（比如./utils.js不能漏掉./）
npm run dev 启动项目前先确认 package.json
VSCode 不替你写脚本，npm run dev 报错“Missing script”，90% 是因为 package.json 里根本没定义这个字段。
- Vite 项目常见脚本是
"dev": "vite"或"start": "vite"，不是所有项目都用start - Create React App 默认是
"start": "react-scripts start"，Vue CLI 是"serve": "vue-cli-service serve" - 终端必须在项目根目录下：检查 VSCode 左下角显示的文件夹路径，或执行
pwd（macOS/Linux）/cd（Windows）确认 - 别在空文件夹里直接敲
npm run dev——node_modules缺失、package.json不存在都会导致静默失败
调试 JS 必须走 http://，不能用 file://
断点不命中？八成是因为你在右键 → “Open with Default Browser”，这走的是 file:// 协议，VSCode 调试器根本连不上。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 调试配置
launch.json中的url必须是http://localhost:xxx，端口号要和你实际启动的服务一致（Vite 默认5173，CRA 是3000） -
webRoot写成"${workspaceFolder}"大部分情况够用；但如果用了 Webpack/Vite 构建，且源码路径和生成路径不一致，就得配sourceMapPathOverrides - 断点显示空心圆（⚪）= 源码未加载成功，常见原因：HTML 里
script标签路径写错、构建后 JS 文件没输出、或者webRoot指向了错误目录 - 修改 JS 后，需手动刷新浏览器（
F5），Live Server 的自动刷新不触发 VSCode 断点重载逻辑
单独运行 .js 文件容易误判结果
VSCode 里右键一个 main.js → “Run Code”（来自 Code Runner 插件），跑的是 Node.js 环境，不是浏览器 —— document、window、alert 全报错，这不是前端代码该有的运行方式。
- 前端 JS 本质是浏览器运行时产物，脱离 DOM 和 BOM 就失去上下文
- 想快速验证逻辑？用浏览器控制台（
F12→ Console）或写个最小 HTML 包一层再用 Live Server 启动 - Node.js 脚本（如构建脚本、数据处理）才适合直接
node xxx.js，但这类不属于“前端代码运行”范畴
真正卡住人的地方往往不是配置多复杂，而是没分清“谁在执行代码”：Live Server 启的是 HTTP 服务，npm run dev 调的是框架自带的 dev server，Debugger 连的是浏览器进程 —— 三者链条断一环，就只剩白屏和报错。
