Live Server扩展可实现在VSCode中实时预览Web页面；通过扩展市场安装后重启编辑器，或用Open Preview to the Side快速查看静态HTML，亦可配置tasks.json启动本地Node服务。
如果您在使用 VSCode 编辑 Web 应用时希望直接在编辑器内预览运行效果，Live Frame 提供了一种无需切换浏览器窗口即可实时查看页面渲染的方式。以下是启用和使用 Live Frame 的具体操作路径：
本文运行环境：MacBook Air，macOS Sequoia。
一、通过扩展市场安装 Live Server
Live Frame 功能本身并非 VSCode 内置，而是依赖于第三方扩展提供类似能力；其中 Live Server 是最常用且兼容性良好的替代方案，它可在本地启动一个开发服务器并自动刷新页面。
1、点击左侧活动栏的扩展图标（四个方块组成的图标）。
2、在搜索框中输入 Live Server 并回车。
3、在搜索结果中找到作者为 Ritwick Dey 的扩展，点击“安装”按钮。
4、安装完成后，重启 VSCode 以确保扩展完全加载。
二、使用内置 WebView 模拟轻量级预览
VSCode 原生支持 WebView API，部分插件或自定义任务可调用该机制，在编辑器右侧边栏嵌入一个只读 HTML 渲染视图，适用于静态页面快速检查结构与样式。
1、打开任意 .html 文件。
2、右键点击编辑器空白区域，选择 Open Preview to the Side。
3、右侧将出现一个只读渲染面板，内容随源码保存实时更新（需手动刷新）。
三、配置 tasks.json 启动本地 Node.js 服务
对于需要后端交互或模块化构建的项目，可通过 VSCode 的任务系统调用 npm 或 node 命令启动真实服务，并将输出日志集成到终端面板中，便于调试上下文统一管理。
1、在项目根目录下创建 .vscode/tasks.json 文件（若不存在）。
2、填入标准 task 配置，指定 command 为 npm start 或 node server.js。
3、按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux），输入 Run Task 并选择对应任务。
4、服务启动后，VSCode 终端将显示监听地址，如 http://localhost:3000。
