live server比open in browser更适合现代前端开发，因其启动真实http服务（如http://localhost:5500），支持ajax、cors、service worker等需http协议的web api，而open in browser仅用file://协议，会导致资源加载失败或fetch被拦截。
Live Server 为什么比 Open in Browser 更适合现代前端开发
Live Server 是当前最主流的本地预览方案，它解决的核心问题是「改完代码要手动刷新」。Open in Browser 只是打开文件 URL（file://），而 Live Server 启动的是真实 HTTP 服务（http://localhost:5500），这直接影响到 AJAX 请求、CORS、Service Worker 等功能能否正常运行。
常见错误现象包括：Failed to load resource: net::ERR_FILE_NOT_FOUND（用 Open in Browser 加载 JS/CSS 失败）、Access to fetch at 'file://' from origin 'null' has been blocked（fetch 被拦截）。
- 必须用
http://协议才能触发浏览器对现代 Web API 的完整支持 - Live Server 默认端口是
5500，可在settings.json中修改："liveServer.settings.port": 3000 - 启动后右下角状态栏会显示
Go Live按钮和当前端口，点击即可在默认浏览器打开 - 保存 HTML/CSS/JS 文件时自动刷新，但不支持热模块替换（HMR）——如需 HMR，得配 webpack/vite
如何让 Live Server 支持多浏览器并启用无痕模式
默认只在系统默认浏览器中打开，但开发时经常需要同时验证 Chrome/Firefox/Safari 表现。Live Server 提供了命令行参数配置能力，而不是靠插件 UI 选项。
关键配置项写在 settings.json 里：
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito", "liveServer.settings.CustomBrowser": "chrome"
注意：CustomBrowser 必须设为已安装浏览器的可执行名（chrome、firefox、edge），Windows/macOS/Linux 下大小写和拼写必须一致；AdvanceCustomBrowserCmdLine 是完整启动命令，支持 --incognito、--user-data-dir=/tmp/chrome-test 等参数。
- 如果设置后没生效，检查是否拼错键名（常见错误：把
AdvanceCustomBrowserCmdLine写成AdvancedCustomBrowserCmdLine） - macOS 上 Chrome 可执行名是
Google Chrome，需加引号："\"Google Chrome\" --incognito" - Firefox 无痕模式参数是
-private-window，不是--incognito
调试时怎么让 VS Code 和浏览器 DevTools 同步断点
Live Server 只负责刷新，不提供调试能力。要单步执行 JS、查看变量、监听网络请求，必须用 Debugger for Chrome 插件配合 launch.json 配置。
典型配置如下（放在项目根目录 .vscode/launch.json）：
{
"version": "0.2.0",
"configurations": [{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${workspaceFolder}/src/*"
}
}]
}
重点在于：url 必须和 Live Server 实际端口一致；webRoot 映射源码位置；sourceMapPathOverrides 是构建项目（如 Vue/React）必需的，否则断点打不到原始 TS/JSX 文件。
- 启动前确保 Live Server 已运行，否则
url打不开 - VS Code 中按
F5启动调试，Chrome 会新开窗口并加载页面，此时编辑器内打的断点才生效 - 如果断点灰色不可用，大概率是
sourceMapPathOverrides路径映射错了，或构建产物没生成 sourcemap
为什么改完代码有时不刷新？排查这三处
Live Server 的自动刷新不是魔法，它依赖文件系统事件监听。当监听失效或被干扰，就会出现“保存了但页面没变”的情况。
最容易被忽略的三个地方：
-
files.watcherExclude设置太激进：比如误加了"**/*.html"，导致 HTML 文件变更不被监听 - 项目在 WSL 或远程容器中开发，而 VS Code 运行在 Windows/macOS 主机上——文件系统事件无法穿透，需改用 Remote SSH + Live Server Remote 插件
- 某些编辑器操作（如格式化后保存、Prettier 自动插入空行）可能触发两次写入，Live Server 有防抖机制，短时间高频变更会被合并，看起来像没刷新
临时验证方法：在终端执行 curl http://localhost:5500/index.html，看返回内容是否最新。如果不是，说明服务端没更新，问题出在监听层；如果是，说明是浏览器缓存或 WebSocket 刷新通道中断。
