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)。

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

相关推荐
guhy fighting1 天前
pycharm 切换版本和窗口cmd看到的版本不一致问题解决
ide·python·pycharm
山峰哥2 天前
查询优化案例:从慢查询到闪电般的查询速度
数据库·sql·性能优化·编辑器·深度优先
π同学2 天前
ESP-IDF+vscode开发ESP32第二讲——console
vscode·esp32·console
计算机安禾2 天前
【C语言程序设计】第35篇:文件的打开、关闭与读写操作
c语言·开发语言·c++·vscode·算法·visual studio code·visual studio
多加点辣也没关系2 天前
Claude Code 安装与配置(详细教程)
ide·ai
Austin_YB2 天前
VScode中配置Python环境
ide·vscode·python
今天也是爱大大的一天吖2 天前
vscode迁移插件至cursor的三个法子
ide·vscode·编辑器·cursor
汤姆yu2 天前
IDEA使用通义灵码做现有项目迭代开发保姆级教程
java·ide·intellij-idea·灵码
阴暗扭曲实习生2 天前
135编辑器素材管理系统的技术架构
架构·编辑器
易水寒陈2 天前
使用vscode开发stm32
ide·vscode·stm32