VSCode无直接JS即时预览功能，需按场景选工具：静态页用Live Server（起HTTP服务并自动刷新），调试用内置Debugger（设断点/evaluate表达式），框架项目须用官方开发服务器。
VSCode 本身不直接执行 JavaScript，所谓“即时预览”本质是启动一个轻量服务或注入运行环境，把 JS 输出（尤其是 DOM 渲染、console 日志、图表）实时反馈到编辑器内或浏览器中。没有通用的“JS 即时预览”插件，只有按场景选对工具——否则你会卡在白屏、ReferenceError、或反复刷新却看不到变量值。
Live Server 是 HTML+JS 静态页面的唯一可靠选择
它不是“预览 JS”，而是起一个真实 http:// 服务，让浏览器正常加载你的 index.html 和关联的 .js 文件，并监听保存自动刷新。
- 必须确保 JS 代码通过
<script src="main.js"></script>或内联<script>写在 HTML 中；单独打开.js文件点 Live Server 没反应 - 常见错误：
Uncaught ReferenceError: require is not defined→ 说明你写了 Node.js 语法（如require('fs')），Live Server 只跑浏览器环境 - 端口被占？改
liveServer.settings.port到3000或8080，别硬撞默认5500 - 改了 JS 但页面没变？检查浏览器控制台是否报错，或确认文件路径拼写（比如
src="./js/app.js"但实际目录是./scripts/）
想看单个表达式或 console.log 的结果？别用插件，用 VS Code 内置调试器
VS Code 的 Debug 面板 + debugger 语句或断点，比任何“预览插件”都准、无副作用、能看作用域和调用栈。
- 在 JS 文件里加
debugger;，按Ctrl+Shift+D打开调试面板，选 “Chrome” 或 “Node.js” 环境，点绿色三角形启动 → 光标会停在debugger行，下方 Variables 面板显示当前所有变量值 - 右键某行代码 → “Evaluate in Console” 可直接执行该行并输出结果（支持
document.body.innerHTML、[1,2,3].map(x => x*2)等任意表达式） - 不要装所谓 “JS Eval Preview” 类插件——它们常因上下文缺失而报
undefined，还可能污染全局变量
如果是前端框架（React/Vue）项目，Live Server 不适用
这类项目依赖构建工具（Webpack/Vite），必须走官方开发服务器，VS Code 插件只负责启动命令、跳转和日志聚合。
- React：终端运行
npm start或yarn start，VS Code 用 “Terminal: Run Task” 绑定该命令，配合 “Auto Attach” 调试即可 - Vue：同理，
npm run dev启动后，默认地址是http://localhost:5173（Vite）或http://localhost:8080（Vue CLI），Live Server 的5500端口完全无效 - 误用 Live Server 加载
dist/index.html？会看到空白页 + 控制台报Failed to load resource: net::ERR_FILE_NOT_FOUND（因为构建产物里的 JS/CSS 路径是相对的，file://协议下无法解析）
真正容易被忽略的是：JS “预览”从来不是渲染一张图或打印一行字这么简单——它取决于执行环境（浏览器 vs Node）、模块系统（ESM vs CommonJS）、构建流程（是否需打包）、甚至 source map 是否启用。选错工具链，花再久配插件也白搭。
