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

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

相关推荐
VidDown13 天前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
摇滚侠13 天前
IDEA 创建 Java 项目 手动整合 SSM 框架
java·ide·intellij-idea
霸道流氓气质13 天前
Trae IDE 新手入门指南
ide
VidDown13 天前
显卡处理视频技术详解:从硬解码到 NVENC,GPU 如何让视频处理起飞?
javascript·编辑器·音视频·视频编解码·视频
夜猫逐梦13 天前
【UE基础】03.蓝图与编辑器工作流
编辑器·ue·蓝图·ue编辑器
VidDown13 天前
视频帧率技术详解:从 24fps 到 120fps,帧率如何影响你的观看体验?
网络·网络协议·编辑器·音视频·视频编解码·视频
爱就是恒久忍耐13 天前
VSCode里如何比较2个branch
ide·vscode·编辑器
意法半导体STM3213 天前
【官方原创】如何为STM32CubeMX2配置Visual Studio Code配置方案
vscode·stm32·单片机·嵌入式硬件·策略模式·stm32cubemx·嵌入式开发
bloglin9999913 天前
vscode中可视化的合并分支,在“合并编辑器中解析”中“与基线进行比较”是什么意思
ide·vscode·编辑器
终将老去的穷苦程序员13 天前
IntelliJ IDEA 的安装教程
java·ide·intellij-idea