live server是最推荐的vscode运行html方式，它启动本地http服务（如http://127.0.0.1:5500）绕过file://协议限制，支持fetch、localstorage等api；需安装ritwick dey原版插件，打开html文件后在编辑器内右键选择“open with live server”，或点击状态栏“go live”按钮。
VSCode 本身不运行 HTML，它只编辑；所谓“运行”，本质是让浏览器加载并渲染文件——关键在于用什么协议、什么方式加载。
Live Server 是最省心的启动方式
它起一个本地 HTTP 服务（默认 http://127.0.0.1:5500），绕过 file:// 协议限制，支持 fetch、相对路径、localStorage 等 Web API 正常工作。
- 安装扩展：在扩展市场搜
Live Server，认准作者Ritwick Dey - 必须打开 HTML 文件后，在编辑器内右键 →
Open with Live Server（不是资源管理器里右键） - 首次启动后，右下角会出现绿色
Go Live按钮，点它可快速重启服务 - 端口被占？右键状态栏端口号 →
Change Port，改个如5501的值即可
直接用浏览器打开 file:// 链接只适合极简验证
双击 HTML 文件或拖进浏览器，走的是 file:// 协议。它快，但有硬伤：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
fetch请求会因 CORS 被拒（除非加--disable-web-security启动浏览器，不推荐） - 某些现代 API（如
Service Worker）完全不可用 - 相对路径行为和 HTTP 服务不一致，比如
./img/logo.png可能解析失败 - 无法调试 JavaScript 断点（Chrome DevTools 对
file://页面的调试支持有限）
launch.json 调试需匹配 Live Server 地址
想用 F5 启动并断点调试 JS？不能直接配 file://，必须让 launch.json 指向 Live Server 启动的 HTTP 地址：
- 先确保已用 Live Server 启动页面，记下实际 URL（如
http://127.0.0.1:5500/index.html） - 在
.vscode/launch.json中配置："url": "http://127.0.0.1:5500/index.html"，而非file:///路径 -
"webRoot"必须设为"${workspaceFolder}"，否则断点无法命中 - 没装
Debugger for Chrome或msedge-devtools扩展？F5 会报Cannot find runtime 'chrome'
tasks.json 手动调浏览器容易跨平台失效
用 tasks.json 调 start（Windows）或 open（macOS）命令看似方便，但问题明显：
- Windows 上
start命令对空格路径敏感，"${workspaceFolder}/index.html"若含中文或空格会失败 - macOS/Linux 需写
open -a "Google Chrome"，但浏览器名大小写、空格、是否已安装都得手动校验 - 无法自动刷新，每次改代码都要重新运行任务
- 路径必须用
file://格式，又回到前面说的协议限制问题
真正要动手调试 JS 时，别卡在“怎么打开浏览器”上——先确认 Live Server 已跑起来，再把 launch.json 的 url 和它对齐。最容易被忽略的，是 webRoot 指向错误导致断点灰色无效，以及误以为双击打开就能用所有 Web API。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
