vscode直接通过打断点方式调试vite项目

环境

VScode版本: 1.82.x 项目环境: vite + vue3

实现方式

配置vscode可以在任何地方打断点

创建配置文件

使用的是edge就选第一个，使用的是chrome就选第二个，这里我选edge

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge", //调试的环境
            "request": "launch", //调试模式：启动类型
            "name": "针对 localhost 启动 Edge", // 自定义调试名称
            "url": "http://localhost:4200", //调试的服务地址，需要和vite或webpack的devServer地址一致
            "webRoot": "${workspaceFolder}" // 调试的根路径为src业务目录下
        }
    ]
}

该文件会自动生成在项目的.vscode/launch.json

加个断点，并开始调试

先按正常方式启动vite的dev serve

再在vscode的调试面板，启动刚刚配置好的调试（启动完成之后，会自动打开一个新浏览器窗口，并加载项目的默认页，然后就会vscode就会停在打了断点的地方）