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](https://vuejs.org/v2/cookbook/debugging-in-vscode.html#Setting-a-Breakpoint) — Lars Beck, Aug 08 '18 at 08: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, Aug 08 '18 at 08:48
You neither offended me, nor you were rude! Looks like you got me wrong :-) — Lars Beck, Aug 08 '18 at 09:21
I suggest you look for clues in the `webpack://` section of your "Sources" tab in devtools. Do your source files appear in the project root? In the `.` folder? My guess is you can fix this with source map path overrides, but it's impossible to say what those overrides might be without more specifics about your project. An MCVE would go a long way here, vs. the nebulous "my Vue.js project". [Maybe this could help?](https://stackoverflow.com/questions/50765353/visual-studio-code-breakpoint-appearing-in-wrong-place/50826961#50826961) — Mike Patrick, Aug 16 '18 at 02:15
@MikePatrick thx for your help. I update my question with my project structer and I try the anwser you post, but it´s still not working. — Darem, Aug 16 '18 at 05:20
Hi Darem, can you share your source code? It might be easier to help you if we see what's in config — Arielle Nguyen, Aug 18 '18 at 10:10
@ArielleNguyen What config file do you mean? I will Update my Question than :) — Darem, Aug 19 '18 at 06:46

score 6 · Answer 1 · answered Aug 14 '18 at 06:06

6

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 '18 at 06:06

Saeed

2,169
2
13
29

looks like there are big issues with this way of debugging https://github.com/vuejs/vue-loader/issues/1163 – Saeed Aug 14 '18 at 06:23
1

u save my week @Saeed – Navid_pdp11 Aug 21 '18 at 07:31

score 6 · Answer 2 · answered Sep 04 '19 at 08:42

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)

The babel piece was the issue for me. It would start at the right breakpoint but then jump around. Many thanks — Dylan, Jun 13 '20 at 17:47

score 0 · Answer 3 · answered May 31 '19 at 13:55

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"

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

3 Answers3