admin管理员组

文章数量:1391985

I'm trying to debug vuejs with vscode, I've tried a lot of tutorials/answers and could not make it work.

So I decided to ask a question here, maybe nowadays there's a right way to make it work.

I've created a project that it's identical with the one I want to debug, so I can post prints here.

The project structure is:

Here is the unbound breakpoint:

Sources Tab in chrome looks like:

More detailed chrome sources tab:

vue.config.js:

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  transpileDependencies: true
}

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
              "**/src/*": "${webRoot}/src/*",
            },
            "preLaunchTask": "vuejs: start"
          }
    ]
}

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "vuejs: start",
        "type": "npm",
        "script": "serve",
        "isBackground": true,
        "problemMatcher": [{
            "base": "$tsc-watch",
            "background": {
                "activeOnStart": true,
                "beginsPattern": "Starting development server",
                "endsPattern": "Compiled successfully"
            }
        }],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
    ]
}

package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-piler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:remended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

UPDATE

@A.D asked if I've tried to use keyword

debugger;

Here is the results: Ps: I don't want to start writing debugger in my code...

But with that i could see that the debugger file is pointing to:

C:\Users\vinic\Desktop\test\test\js\webpack:\test\src\ponents\HelloWorld.vue

But the ponent src is actualy located in

C:\Users\vinic\Desktop\test\test\src\ponents\HelloWorld.vue

Why my breakpoints are not bounding?

I'm trying to debug vuejs with vscode, I've tried a lot of tutorials/answers and could not make it work.

So I decided to ask a question here, maybe nowadays there's a right way to make it work.

I've created a project that it's identical with the one I want to debug, so I can post prints here.

The project structure is:

Here is the unbound breakpoint:

Sources Tab in chrome looks like:

More detailed chrome sources tab:

vue.config.js:

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  transpileDependencies: true
}

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
              "**/src/*": "${webRoot}/src/*",
            },
            "preLaunchTask": "vuejs: start"
          }
    ]
}

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "vuejs: start",
        "type": "npm",
        "script": "serve",
        "isBackground": true,
        "problemMatcher": [{
            "base": "$tsc-watch",
            "background": {
                "activeOnStart": true,
                "beginsPattern": "Starting development server",
                "endsPattern": "Compiled successfully"
            }
        }],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
    ]
}

package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-piler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:remended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

UPDATE

@A.D asked if I've tried to use keyword

debugger;

Here is the results: Ps: I don't want to start writing debugger in my code...

But with that i could see that the debugger file is pointing to:

C:\Users\vinic\Desktop\test\test\js\webpack:\test\src\ponents\HelloWorld.vue

But the ponent src is actualy located in

C:\Users\vinic\Desktop\test\test\src\ponents\HelloWorld.vue

Why my breakpoints are not bounding?

• javascript
• vue.js
• visual-studio-code
• vuetify.js

Share Improve this question Follow edited Aug 5, 2022 at 22:21 Vinicius Andrade asked Aug 2, 2022 at 17:17 Vinicius AndradeVinicius Andrade 60422 gold badges1111 silver badges3737 bronze badges 2

• Tried using the debugger keyword? – A.D Commented Aug 2, 2022 at 17:54
• 1 I've just updated the post with the results – Vinicius Andrade Commented Aug 2, 2022 at 18:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Appearently there are some problems with the webpack of vue versions above 2.6.11

Git hub Thread

Reddit Thread

After some discussions with @Tonielton Mota i noticed that, if I fully remove the property name from package.json and package-lock.json it works.

Here are the files that are working:

launch.json

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

package.json

{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-piler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:remended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Try to change webRoot param and leave as in the documentation, you need to include src after ${workspaceFolder}.

{
  "type": "chrome",
  "request": "launch",
  "name": "vuejs: chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

UPDATE: After some research, i found this issue. There is a change in this version that you used. They changed the piler and this affected the way to debugger.

You can use the "2.6.11" works in this version.

Note: This change affected later versions.

本文标签： javascriptVuejsUnbound breakpoint Some of your breakpoints could not be set in VSCODEStack Overflow