Debug Vue.js App with VS Code. Error Unverified Breakpoint

Question

I have the following problem. I want to debug my Vue.js project with VS Code and Chrome. So I follow the official guide on the website Guide but it dont work. The Problem is that I always get the error :

 unverified breakpoint

What do I wrong?

This is my vue.config.js

    module.exports = {
    configureWebpack: {
      devtool: 'source-map'
    }
  }

This is my debugging stetting:

    {
    // 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",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:/src/*": "${webRoot}/*",
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://💻app/*": "${webRoot}/*"
            }
        }
    ]
}

And this is my package.json

    "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

When I try npm run serve I get the error message unverified breakpoint and my breakpoint is never be hit.

I use the vue-cli 3 to generate the project.

Can someone help me pls?

Update

Maybe something is wrong with the path. Because when i run .scripts in the debugger console in VS Code I get paths like this

(c:\Users\XY\Desktop\Vue\route-app\webpack:\src\main.ts)

But there is no folder webpack:. But I have no idea why he is thinking that there is a folder. He make this in every file.

And in my tsconfig.js I already have "sourceMap": true.

Update 2

When I check the checkbox All Exceptions, VS Code show me all Exceptions in my App (they are catched). But my Breakpoints still dont work.

Update 3

My project looks like this

C:\Users\User\Desktop\Vue\route-app
|
-----.vscode
     |
     -----launch.json
|
-----node_modules
     |
     ----- modules etc.
|
-----public
     |
     ----- index.html
     |
     ----- manifest.json
     |
     ----- favicon.ico
|
-----src
     |
     ----- components
           |
           ----- all my components.vue files
     |
     ----- views
           |
           ----- all my views.vue files (this files are for routing)
     |
     ----- App.vue
     |
     ----- main.ts
     |
     ----- registerServiceWorker.ts
     |
     ----- router.ts
     |
     ----- shims-tsx.d.ts
     |
     ----- shims-vue.d.ts
     |
     ----- store.ts
|
-----.postcssrc.js
|
-----babel.config.js
|
-----package-lock.json
|
-----package.json
|
-----tsconfig.json
|
-----tslint.json
|
-----vue.config.js

I'd assume serve is already the correct script, looks like you just have to add a breakpoint — Lars Beck
– Lars Beck, Commented Aug 8, 2018 at 8:44
@LarsBeck I set many different breakpoints on diffrent positions. No one of them work. I followed step by step the guide form the official website. — Darem
– Darem, Commented Aug 8, 2018 at 8:48
You neither offended me, nor you were rude! Looks like you got me wrong :-) — Lars Beck
– Lars Beck, Commented Aug 8, 2018 at 9:21

Saeed · Accepted Answer · 2018-08-14 06:06:10Z

6

+25

This debug adapter doesn't use the same syntax as the Chrome debug adapter: remove the * at the end of url and path:

"webpack:///src/": "${webRoot}/"

answered Aug 14, 2018 at 6:06

Saeed

2,2992 gold badges15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saeed Over a year ago

looks like there are big issues with this way of debugging github.com/vuejs/vue-loader/issues/1163

Navid_pdp11 Over a year ago

u save my week @Saeed

moliyadi · Accepted Answer · 2019-09-04 08:42:28Z

6

config vue.config.js(If it doesn't exist, create one)

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
};

config babel.config.js

module.exports = {
  "env":{
    "development":{
      "sourceMaps":true,
      "retainLines":true, 
    }
  },
  presets: [
    '@vue/app'
  ]
}

config launch.json

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

I can debug .vue and .js file normally after referring to the above configuration.(vue-cli3 + vscode)

answered Sep 4, 2019 at 8:42

moliyadi

631 silver badge2 bronze badges

1 Comment

Dylan Over a year ago

The babel piece was the issue for me. It would start at the right breakpoint but then jump around. Many thanks

Hugo van Schalkwyk · Accepted Answer · 2019-05-31 13:55:06Z

0

For me my webroot folder was not set correctly.

My vue files browser is set to:

D:\Workspace

The project is in that folder as

D:\Workspace\vue_project1

The webroot setting in the launch.json had to change to:

"webRoot": "${workspaceFolder}/vue_project1"

answered May 31, 2019 at 13:55

Hugo van Schalkwyk

2331 gold badge7 silver badges23 bronze badges

Collectives™ on Stack Overflow

Debug Vue.js App with VS Code. Error Unverified Breakpoint

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related