vscode不运行html，需通过浏览器打开；live server插件最稳，支持热重载和本地服务器；open in browser仅适合静态预览；调试需正确配置launch.json。
VSCode 本身不运行 HTML，得靠浏览器打开
VSCode 是编辑器，不是浏览器，它不内置渲染引擎。所谓“运行 HTML”，本质是把 index.html 文件用 Chrome、Edge 或 Firefox 打开——和双击桌面文件效果一样，只是自动化程度更高。
直接按 F5 启动调试？默认会报错 Cannot find runtime 'chrome' on PATH，因为 VSCode 的 Debugger 需要额外配置或插件支持，不是开箱即用。
Live Server 插件：本地开发最稳的选择
这是目前最主流的方案，装上就能点右下角「Go Live」一键启动本地服务器（http://127.0.0.1:5500），自动刷新页面，支持热重载，还能跨域代理（配合 settings.json 配置 "liveServer.settings.port" 或 "liveServer.settings.root"）。
- 必须关掉其他占
5500端口的程序（比如另一个 Live Server 实例或 Python 的http.server） - 路径含中文或空格不会出错，但某些旧版插件在 Windows 下对长路径敏感，建议项目放
C:\dev\这类短路径 - 不处理
fetch跨域，如果调用本地api.json，得确保它和 HTML 同源（同服务器、同端口），否则浏览器仍报CORS error
Open in Browser 插件：适合静态预览，不依赖服务器
右键菜单多一个「Open in Default Browser」，本质是调用系统默认浏览器打开 file:// 协议地址。好处是零配置、无端口冲突；坏处是 XMLHttpRequest、fetch、import 模块等会被浏览器直接拦截（net::ERR_FILE_PROTOCOL），纯展示 HTML/CSS/JS 不涉及网络请求时才推荐。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 适合打开单页简历、CSS 动画演示、Canvas 小实验这类无后端依赖的页面
- 如果用了
import语法（比如import { foo } from './utils.js'），必须用 Live Server 启动，file://下 ES 模块直接报错 - Windows 用户注意：默认浏览器若设为 Edge，可能因安全策略限制 JS 执行，换 Chrome 更稳妥
调试 HTML + JS 时，别跳过 launch.json 配置
想在 VSCode 里打断点、看变量、单步执行 JS？光装插件不够，得配好 .vscode/launch.json。Live Server 启动的页面地址是 http://127.0.0.1:5500/index.html，而 Debugger 默认找 localhost:8080，不手动改 url 字段就会连不上。
最小可用配置示例：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://127.0.0.1:5500/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
漏掉 webRoot 可能导致断点失效；改了端口却没同步更新 url，F5 就白按；Chrome 若未安装或路径异常，会提示 Unable to launch browser，这时得在设置里指定 runtimeExecutable 路径。
实际开发中，很多人卡在这一步就退回手动 F12，其实就差两行 JSON。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
