如何为VS Code Live Server设置Chrome/Firefox替代内置Simple Browser？

VS Code原生的Simple Browser是轻量内置组件，无法直接替换成Chrome或Firefox，但可以通过以下两种方案实现带开发者工具的内置浏览器预览：

方案一：使用Browser Preview插件（推荐） #

这是最直接的方式，该插件基于Chrome内核，支持在VS Code侧边栏嵌入完整浏览器并打开开发者工具：

• 打开VS Code插件市场，搜索并安装「Browser Preview」插件
• 打开VS Code设置（快捷键Ctrl+,），搜索Live Server: Custom Browser，将值设置为browser-preview
• 或者直接编辑settings.json，添加以下配置：

  "liveServer.settings.customBrowser": "browser-preview"
  

• 重启Live Server后，会自动在VS Code侧边栏打开带DevTools的Chrome内核窗口，直接使用即可

方案二：自定义外部浏览器嵌入（进阶） #

如果偏好Firefox，可以借助「Debugger for Firefox」插件配合调试配置实现类似效果，但步骤更繁琐：

• 安装「Debugger for Firefox」插件
• 创建.vscode/launch.json配置文件，添加以下内容：

  {
      "version": "0.2.0",
      "configurations": [
          {
              "type": "firefox",
              "request": "launch",
              "name": "Launch Firefox in VS Code",
              "url": "http://localhost:5500", // Live Server默认端口，按需修改
              "webRoot": "${workspaceFolder}",
              "internalConsoleOptions": "openOnSessionStart"
          }
      ]
  }
  

• 启动Live Server后，运行这个调试配置，Firefox会以嵌入面板的形式在VS Code内打开，支持开发者工具

注意：如果之前修改settings.json无效，大概率是配置项名称错误或没覆盖默认设置，确保使用的是liveServer.settings.customBrowser这个正确的键。

内容的提问来源于stack exchange，提问作者Brent Meacham