I'm trying to debug vuejs using vscode, I've tried a lot of tutorials/answers but can't get it to work.

So I decided to ask a question here, maybe there is a correct way to make it work now.

I created a project identical to the one I want to debug so I can post the print here.

The project structure is:

This is an unbound breakpoint:

The Sources tab in Chrome looks like this:

More detailed Chrome source 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-compiler": "^2.6.14" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

renew

@A.D asked me if I tried using keywords

debugger;

The results are as follows: Ps: I don't want to start writing a debugger in my code...

But I can see the debugger file pointing to:

C:UsersvinicDesktoptesttestjswebpack:testsrccomponentsHelloWorld.vue

But the component src is actually located in

C:UsersvinicDesktoptesttestsrccomponentsHelloWorld.vue

Why do my breakpoints have no boundaries?

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

{ // 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://localhost:8080", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*", }, "preLaunchTask": "vuejs: start" } ] }

{ "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-compiler": "^2.6.14" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }