vscode浏览器启动报错

1. 创建或修改 launch.json 配置文件

点击左侧边栏的"运行和调试"按钮(或按 Ctrl+Shift+D),然后点击"打开 launch.json"。

2. 配置正确的浏览器路径

根据你的操作系统和浏览器,使用以下配置之一:

Windows 系统:

json 复制代码
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动Chrome调试",
            "file": "${workspaceFolder}/ch0111.html",
            "runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

macOS 系统:

json 复制代码
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动Chrome调试",
            "file": "${workspaceFolder}/ch0111.html",
            "runtimeExecutable": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Linux 系统:

json 复制代码
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动Chrome调试",
            "file": "${workspaceFolder}/ch0111.html",
            "runtimeExecutable": "/usr/bin/google-chrome",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

3. 安装必要的扩展

确保已安装 Debugger for ChromeJavaScript Debugger 扩展。

4. 更好的方案:使用 Live Server

对于Vue开发,推荐使用 Live Server 扩展:

  1. 在扩展商店搜索并安装 "Live Server"
  2. 右键点击 HTML 文件
  3. 选择 "Open with Live Server"

这样可以避免浏览器路径配置问题,并且支持热重载。

5. 检查浏览器是否已安装

如果使用 Chrome,确认浏览器已正确安装在系统中。如果没有,可以下载安装或改用其他浏览器(如 Edge、Firefox)。

试试这些方法,应该能解决你的问题!如果还有问题,告诉我你的操作系统类型,我可以提供更具体的配置。

相关推荐
Duo1J1 小时前
【UE】Slate 编辑器工具开发03 - 节点编辑器 (EdGraph)
ue5·编辑器·游戏引擎·ue4
游戏开发爱好者84 小时前
iOS开发IDE有哪些 Xcode 和 快蝎 轻量替代方案
ide·vscode·ios·个人开发·xcode·swift·敏捷流程
张太行_5 小时前
vscode在open folder如何设置默认路径
ide·vscode·编辑器
AI的探索之旅20 小时前
AI辅助原理图评审:电源去耦、BOOT引脚、VCAP——19项逐一核查,遗漏?不存在的
人工智能·vscode·嵌入式硬件
qq_452396231 天前
第二篇:《Go 开发环境搭建:SDK、IDE、Module 与 Hello World》
开发语言·ide·golang
●VON1 天前
鸿蒙 PC Markdown 编辑器界面语言切换:跟随系统、简体中文与 English 的完整状态闭环
华为·编辑器·harmonyos·鸿蒙
可视化运维管理爱好者1 天前
nVisual Studio:数据中心网络智能规划设计工具
网络·ide·visual studio
李顿波1 天前
开发全流程:Ai 简单指导
ide
●VON1 天前
鸿蒙 PC Markdown 编辑器内部隐私与安全评审
安全·华为·编辑器·harmonyos·鸿蒙
●VON1 天前
鸿蒙 PC Markdown 编辑器离线专业渲染管线
华为·编辑器·harmonyos·鸿蒙