在vscode中运行html文件并选择指定浏览器，是前端开发过程中非常常见的操作需求，不同的浏览器对前端特性的支持存在差异，灵活切换浏览器可以快速验证页面兼容性。
基础快速预览方法
如果不想进行复杂配置，可以先安装open_in_browser插件，安装完成后右键点击html文件，就能看到用默认浏览器或者其他已安装浏览器打开的选项。
操作步骤：
- 打开vscode的扩展面板，搜索open_in_browser，点击安装
- 在编辑区打开需要运行的html文件
- 右键点击编辑区空白处，选择Open In Default Browser或者Open In Other Browsers，选择目标浏览器即可
通过配置launch.json自定义浏览器选择
如果需要在调试模式下选择浏览器运行，或者想要更灵活的配置，可以通过配置launch.json文件实现，这种方式支持自定义浏览器的启动参数、调试端口等配置。
第一步：生成launch.json文件
点击vscode左侧的调试图标，再点击顶部齿轮图标，选择Web App (Chrome)或者其他浏览器对应的选项，就会自动生成基础的launch.json文件。
第二步：配置浏览器参数
launch.json的核心配置项在configurations数组中，我们可以针对不同的浏览器添加不同的配置项，以下是常见浏览器的配置示例：
{
"version": "0.2.0",
"configurations": [
// Chrome浏览器配置
{
"type": "chrome",
"request": "launch",
"name": "运行Chrome",
"file": "${file}", // 表示当前打开的文件
"runtimeExecutable": "C:/Program Files/Google/Chrome/Application/chrome.exe", // Chrome可执行文件路径，根据实际安装位置修改
"runtimeArgs": [
"--remote-debugging-port=9222" // 调试端口参数
]
},
// Edge浏览器配置
{
"type": "msedge",
"request": "launch",
"name": "运行Edge",
"file": "${file}",
"runtimeExecutable": "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe",
"runtimeArgs": [
"--remote-debugging-port=9223"
]
},
// Firefox浏览器配置，需要安装Debugger for Firefox插件
{
"type": "firefox",
"request": "launch",
"name": "运行Firefox",
"file": "${file}",
"firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe"
}
]
}
第三步：选择配置运行
配置完成后，点击调试面板的下拉框，选择你想要运行的浏览器配置名称，再点击绿色的启动按钮，就会自动用对应的浏览器打开当前编辑的html文件。
常见问题排查
- 如果提示找不到浏览器可执行文件，需要检查runtimeExecutable或者firefoxExecutable的路径是否正确，不同系统的浏览器安装路径存在差异，mac系统的浏览器路径通常在/Applications目录下
- 如果配置后无法启动调试，检查runtimeArgs中的调试端口是否被其他程序占用，可以更换成其他未被占用的端口
- 使用Firefox配置时需要提前安装Debugger for Firefox插件，否则无法识别firefox类型的配置
注意：如果html文件中引用了本地其他资源文件，建议先打开html文件所在的文件夹作为vscode的工作区，避免出现资源路径加载错误的问题。
vscodehtml浏览器launch_json修改时间：2026-06-27 13:27:26