1. 为什么 Live Server 总打开错浏览器前端本地调试时Live Server 几乎是 VSCode 里装机量最高的插件之一。改一行 HTML 或 CSS点一下右下角 Go Live浏览器自动刷新省去手动切窗口的麻烦。但很多人第一次用就会遇到一个很别扭的问题明明系统默认浏览器是 Edge自己却想用 Chrome 调试或者反过来系统默认是 Chrome但项目需要验证 Edge 的兼容性。点下 Go Live 之后弹出来的偏偏是那个不想用的浏览器。这个问题的根源在于 Live Server 的默认行为。它启动后会读取一个名为liveServer.settings.CustomBrowser的配置项如果这个值是null或空字符串插件就会交给操作系统去决定用哪个浏览器打开也就是走系统默认程序。系统默认是谁它就开谁。所以你想指定 Chrome 或 Edge就必须显式告诉插件用哪个浏览器而不是让它去问系统。更麻烦的是第二层问题。有些朋友的 Chrome 或 Edge 不是通过标准安装包装的而是解压版、绿色版或者装在了非系统盘。这时候即使你在设置里选了 ChromeLive Server 依然会报错提示找不到浏览器可执行文件。因为插件内部是靠一个预设的路径列表去查找的路径对不上就失败。解决办法是手动把liveServer.settings.CustomBrowser之外的另一个参数——浏览器可执行文件的完整路径——填进去。这篇内容面向的就是这个场景你已经在 VSCode 里装了 Live Server想让它固定用 Chrome 或 Edge 打开但被系统默认浏览器抢占或者遇到找不到浏览器的报错。下面我会给出一份可以直接粘贴的settings.json配置骨架再逐项验证每个参数是否生效。整个流程不需要改系统默认浏览器也不影响你日常其他软件的使用习惯。2. TaoToken 配置骨架的前置准备在动手改 Live Server 之前先把环境理清楚。这里说的 TaoToken 配置骨架指的是把浏览器路径、插件参数、验证入口这几件事组织成一份可复用的配置结构而不是每次遇到问题都去搜索框里瞎点。TaoToken 本身是一个面向开发者的模型接入与调试平台官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口在 https://taotoken.net/api 。它和 Live Server 的关系在于当你调试前端页面时如果页面里要调用模型接口做联调可以用 TaoToken 的 API 作为后端地址这样本地 Live Server 起的服务就能直接请求到模型能力不用自己搭一套转发。前置准备分三步。第一步确认 VSCode 版本和 Live Server 插件版本。打开 VSCode左侧扩展面板搜索 Live Server看作者是 Ritwick Dey版本号在 5.7 以上基本都支持本文的配置项。第二步找到你的 Chrome 或 Edge 可执行文件的真实路径。Windows 上 Chrome 通常在C:\Program Files\Google\Chrome\Application\chrome.exeEdge 在C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe。如果你不确定可以在浏览器地址栏输入chrome://version或edge://version看「可执行文件路径」那一行。macOS 上 Chrome 在/Applications/Google Chrome.app/Contents/MacOS/Google ChromeEdge 在/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge。第三步准备好你的 TaoToken API Key如果页面需要联调模型接口的话。登录 https://taotoken.net/api-keys 可以创建和管理 Key这个入口后面验证请求时会用到。注意浏览器路径里如果包含空格在 JSON 中不需要额外转义直接写完整路径即可。但路径分隔符在 Windows 上要用双反斜杠\\或者正斜杠/这是 JSON 转义规则决定的不是 Live Server 的特殊要求。3. 可复制的 settings.json 配置VSCode 的设置分两层用户设置全局生效和工作区设置只对当前项目生效。改 Live Server 浏览器建议放在工作区设置里这样不同项目可以用不同浏览器互不干扰。打开方式是按Ctrl Shift PmacOS 是Cmd Shift P输入Preferences: Open Workspace Settings (JSON)回车后会打开项目根目录下的.vscode/settings.json。如果文件不存在VSCode 会自动创建。下面是一份完整的配置骨架你可以直接粘贴进去然后按自己的路径修改。{ liveServer.settings.CustomBrowser: chrome, liveServer.settings.AdvanceCustomBrowserCmdLine: C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe, liveServer.settings.port: 5500, liveServer.settings.NoBrowser: false, liveServer.settings.ignoreFiles: [ .vscode/**, **/*.scss, **/*.sass, **/*.ts ], liveServer.settings.file: index.html, liveServer.settings.wait: 100, liveServer.settings.fullReload: false, liveServer.settings.useWebExt: false }逐项说明一下。CustomBrowser是核心参数可选值有chrome、firefox、edge、safari、opera、brave、null。填null就是走系统默认填具体值就固定用那个。AdvanceCustomBrowserCmdLine是自定义浏览器命令行当CustomBrowser里预设的路径找不到你的浏览器时用这个参数直接指定 exe 完整路径。注意这个参数名是AdvanceCustomBrowserCmdLine不是Advanced少一个 d这是插件的历史拼写写错了不生效。port是 Live Server 起的本地端口默认 5500如果被占用可以改成 5501 或别的。NoBrowser设为 true 时Go Live 不会自动打开浏览器适合你手动开窗口调试的场景。ignoreFiles是热重载忽略的文件模式默认忽略.scss和.ts是因为它们需要编译直接刷新没意义。file指定默认打开的入口文件不填就是当前打开的 HTML。wait是文件保存后延迟多少毫秒再刷新设 100 到 300 比较稳避免编辑器还没写完就触发刷新。fullReload设为 true 时每次都是整页刷新false 时尽量走 CSS 热替换。useWebExt是给 Web Extension 用的普通前端项目保持 false。如果你用的是 Edge把CustomBrowser改成edgeAdvanceCustomBrowserCmdLine改成 Edge 的路径{ liveServer.settings.CustomBrowser: edge, liveServer.settings.AdvanceCustomBrowserCmdLine: C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe }macOS 用户把路径换成/Applications/Google Chrome.app/Contents/MacOS/Google Chrome或/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge注意 JSON 里正斜杠不需要转义。4. 验证请求与成功结果配置写完后必须验证是否真的生效不能只看设置界面显示对了就完事。验证分三步启动、观察、请求。第一步在项目里打开一个 HTML 文件点 VSCode 右下角的 Go Live或者右键选择 Open with Live Server。观察弹出的浏览器是不是你指定的那个。如果弹出来的是 Chrome而你的系统默认是 Edge说明CustomBrowser生效了。如果弹出来还是 Edge说明配置没被读取检查.vscode/settings.json是否在项目根目录以及 JSON 语法有没有错误VSCode 会在有语法错误时标红。第二步看 Live Server 的输出面板。按Ctrl Shift U打开输出右上角下拉选 Live Server。正常启动会打印类似这样的日志Live Server is running on port 5500 Opening browser: chrome Browser path: C:\Program Files\Google\Chrome\Application\chrome.exe如果看到Browser path那一行是你填的路径说明自定义路径被正确解析。如果看到Browser not found, falling back to default说明路径写错了或者AdvanceCustomBrowserCmdLine拼写有问题。第三步验证页面里的接口请求。假设你的 HTML 里有一段调用 TaoToken API 的代码用来测试模型对话能力fetch(https://taotoken.net/api/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer YOUR_TAOTOKEN_API_KEY }, body: JSON.stringify({ model: gpt-4o-mini, messages: [{ role: user, content: 你好 }] }) }) .then(res res.json()) .then(data console.log(data)) .catch(err console.error(请求失败, err));把YOUR_TAOTOKEN_API_KEY换成你在 https://taotoken.net/api-keys 创建的 Key。保存后 Live Server 会自动刷新页面打开 Chrome 的开发者工具 Console如果看到返回的 JSON 数据说明浏览器指定成功且本地服务能正常请求到 TaoToken 的接口。如果 Console 报 CORS 错误那是浏览器跨域策略不是 Live Server 的问题需要在 TaoToken 侧配置允许的来源或者用本地代理。成功的结果就是Go Live 后固定打开你指定的浏览器输出面板显示正确的浏览器路径页面里的接口请求能拿到响应。这三条都满足配置就算完整生效了。5. 本篇常见错排查即使按上面的步骤做了还是可能踩坑。下面列几个高频问题和对应的排查动作。报错一Browser not found或Failed to launch browser。最常见的原因是路径写错。Windows 上Program Files和Program Files (x86)是两个不同目录64 位 Chrome 在Program Files32 位或某些 Edge 版本在Program Files (x86)。去chrome://version复制真实路径别凭记忆写。另外 JSON 里反斜杠要双写C:\Program Files在 JSON 里必须写成C:\\Program Files否则\P会被当成非法转义整个 JSON 解析失败配置全部不生效。报错二设置改了但没反应。检查你是不是改在了用户设置里但项目的工作区设置覆盖了它。VSCode 的设置优先级是工作区 用户。打开命令面板输入Preferences: Open Workspace Settings (JSON)看里面有没有冲突的liveServer.settings.CustomBrowser。另外改完设置后已经运行的 Live Server 不会自动重载配置需要先 Stop Live Server点右下角 Port: 5500 停止再重新 Go Live。报错三端口被占用Port 5500 is already in use。说明上一个 Live Server 进程没退干净或者别的软件占了这个端口。改liveServer.settings.port为 5501 或 5502或者去任务管理器结束残留的 node 进程。macOS 上用lsof -i :5500找到进程号再 kill。报错四页面刷新但接口请求 401。这是 TaoToken API Key 的问题不是 Live Server 的问题。检查 Key 是否复制完整有没有多余空格以及 Key 是否已过期。去 https://taotoken.net/api-keys 重新生成一个替换后保存Live Server 会自动刷新再看 Console。报错五macOS 上提示Operation not permitted。这是系统权限问题VSCode 没有权限启动/Applications下的应用。去「系统设置 隐私与安全性 完全磁盘访问权限」把 VSCode 加进去重启 VSCode 再试。提示每次改完settings.json先看 VSCode 右下角有没有 JSON 语法错误提示。有红色波浪线就说明配置根本没被读取先修语法再谈生效。6. 接入与验证的下一步浏览器指定好之后本地调试的链路就通了。如果你接下来要在页面里联调模型接口建议先去 https://taotoken.net/api-keys 把 API Key 建好然后在 Live Server 起的页面里用 fetch 直接请求 https://taotoken.net/api 下的接口。接入文档在 https://taotoken.net/doc 里面有各语言的最小请求示例照着改一下就能跑。想先在网页里试一下模型对话效果可以打开 https://taotoken.net/models 直接对话确认返回格式和你的前端解析逻辑对得上再写进代码里。如果你不只是调试单个页面而是要在 VSCode 里长期做编码辅助、让 Agent 帮你改代码那 Live Server 只是其中一环。更顺手的做法是配一个 Coding Plan把模型调用、代码补全、Agent 执行串起来入口在 https://taotoken.net/coding-plan 。这样你本地起服务、改代码、调接口都在同一个工作流里不用来回切工具。配置骨架已经给你了剩下的就是把它粘进.vscode/settings.json点一次 Go Live看浏览器是不是按你指定的那个弹出来。