vs code 中调试 vue3 项目

Question

概述

想在 vs code 中调试 vue3 项目，类似 IDEA 中调试 java 一样

我的做法

网上搜索后 vue 官网有设置步骤，地址是：https://v3.cn.vuejs.org/cookb...

1. 在 vs code 中安装 chrome 插件，提示 deprecated，没有理会，仍然安装
   
2. 项目 vue.config.js 中做了下面的设置

module.exports = {
    configureWebpack: config => {
      config.devtool = "source-map";
  }
}

3. vs code 项目里创建了文件 launch.js，其中代码如下 - 从官网拷贝来的

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://127.0.0.1:9000",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "type": "firefox",
            "request": "launch",
            "name": "vuejs: firefox",
            "url": "http://127.0.0.1:9000",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }
    ]
}

当然 url 是修改为我自己项目的端口号了

4. 在项目的登录页面设置一个断点
5. 在 cmd 中通过命令 npm run serve 运行项目
6. 在 vs code 的 debugger 页面中选择 chrome 的配置并点击左边的绿色小三角启动项目
   
7. 在登录页面点击按钮执行之前下好断点的代码，如下图
   
8. 执行项目之前在行号129下断点时是红色的，运行起来后是透明色的了。。。在登录页面点击按钮后程序没有断掉，直接在控制台中打印出信息了
   
9. 是我哪里做的不对么？为什么直接打印出信息没有断掉程序？

Answer 1

同问,我也是尝试多次,没有成功

Answer 2

楼主可以将光标移动到变成透明的断点上，应该能够看到提示 "unbounded breakpoint" 并且会有一个链接，会出现指引，选择第一个，可以查看错误原因。把错误原因放上来可能能帮到你。

我也遇到了类似的问题，发现官网提供的配置有错误，需要将 "webRoot": "${workspaceFolder}/src" 的后缀/src 和 "sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*"}一整行去掉。因为新版的插件默认将 webRoot 定位到了 /src目录，加上后缀反而会找不到指定的断点位置。修改以后可以成功打断点。