调试 vite+vue+ts

调试 debug vite+vue+ts

以调试 vue3-demos 为例：

• vscode 调试

添加以下文件
.vscode\launch.json

webRoot 是关键，需要指向对应位置

{
    // 使用 IntelliSense 了解相关属性。
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vue3-demos",
            "url": "http://localhost:3000",
            // "webRoot": "${workspaceFolder}"
            "webRoot": "${workspaceFolder}/apps/vue3-demos"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "vue3-boilerplate",
            "url": "http://localhost:3000",
            // "webRoot": "${workspaceFolder}"
            "webRoot": "${workspaceFolder}/apps/vue3-boilerplate"
        }
    ]
}

执行命令 pnpm dev；
点击左侧导航栏运行和调试按钮，选中 vue3-demos 点击开始调试按钮；
在指定代码处添加断点；
有必要的话可以刷新浏览器使断点可用；

• Chrome 调试 - vite+vue+ts 时 debugger 断点位置不准确解决办法

浏览器F12开发工具 设置 里面 取消勾选 启用 JavaScript 源代码映射即可解决

取消勾选 启用 JavaScript 源代码映射

参考：
vscode 调试
Chrome 调试 vite+vue+ts 时 debugger 断点位置不准确办法