VS Code - Debugging VUE component in Laravel project - Unverified breakpoint

Question

I'm trying to debug a VUE component in Laravel 5.5 project using VS Code.

The last version of VS Code is installed.
Debugger for Chrome 4.2.0 is installed.
All Chrome processes are killed.

launch.json in .vscode folder has the following code:

"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8000",
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true,
        "runtimeArgs": [
        "--remote-debugging-port=9222"
        ]
    },  
]

I start the project from CMD like this:

λ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

I set a breakpoint in Vue component and start debugging (see image)

As the result, the project page is opened in Chrome, but breakpoint doesn't work.
It is greyed out with the following message:

Unverified breakpoint, Breakpoint ignored because generated code not found
(source map problem?)

I found 4 files with the name "webpack.mix.js" in the project folder. I have added the ".sourceMaps();" to each of them like this:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sourceMaps();

After that I rebuild the project by:

npm run dev

But I didn't find any map files in CSS folder and the problem is still here.

Are you using laravel-mix?

Phiter
– Phiter

2018-03-13 11:41:12 +00:00
Commented Mar 13, 2018 at 11:41 — Phiter
– Phiter, Commented Mar 13, 2018 at 11:41
If you are, you'll probably need to enable source-maps.

Phiter
– Phiter

2018-03-13 11:41:34 +00:00
Commented Mar 13, 2018 at 11:41 — Phiter
– Phiter, Commented Mar 13, 2018 at 11:41
See laravel.com/docs/5.5/mix#working-with-stylesheets

Phiter
– Phiter

2018-03-13 11:46:24 +00:00
Commented Mar 13, 2018 at 11:46 — Phiter
– Phiter, Commented Mar 13, 2018 at 11:46
I can see laravel-mix in package,json

Виталий Комаров
– Виталий Комаров

2018-03-13 11:53:37 +00:00
Commented Mar 13, 2018 at 11:53 — Виталий Комаров
– Виталий Комаров, Commented Mar 13, 2018 at 11:53
Read the documentation and you'll understand what to do

Phiter
– Phiter

2018-03-13 11:57:30 +00:00
Commented Mar 13, 2018 at 11:57 — Phiter
– Phiter, Commented Mar 13, 2018 at 11:57

Carlos Frias · Accepted Answer · 2018-08-01 19:25:11Z

5

This is the configuration that worked for me, it allows me to set breakpoints for .vue and .js files directly in VSCode:

VSCode's launch.json:

{
    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/public",
        "sourceMapPathOverrides": {
            "webpack:///resources/assets/js/*.vue": "${workspaceFolder}/resources/assets/js/*.vue",
            "webpack:///./resources/assets/js/*.js": "${workspaceFolder}/resources/assets/js/*.js",
            "webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
        }
    }]
}

webpack.mix.js:

let mix = require('laravel-mix');

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sourceMaps(false, 'source-map')
  .sass('resources/assets/sass/app.scss', 'public/css');

answered Aug 1, 2018 at 19:25

Carlos Frias

5337 silver badges12 bronze badges

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

2 Comments

Виталий Комаров Over a year ago

Thanks, I'll try it later.

Vinay Over a year ago

Thanx! For those who didn't get it working, you might have to tweak the paths to reflect your setup for instance in my setup vue files were located at resources/js instead of resources/assets/js

Stefan_EOX · Accepted Answer · 2021-08-05 13:09:39Z

3

Unfortunately ".sourceMaps()" doesn't help, but the "debugger" keyword can be used instead of standard breakpoints in this case. You just have to add it to needed line of code and the code stops there.

VSCode screenshot demonstrating use of debugger statement

edited Aug 5, 2021 at 13:09

Stefan_EOX

1,5831 gold badge19 silver badges42 bronze badges

answered Mar 13, 2018 at 12:48

Виталий Комаров

2895 silver badges16 bronze badges

Comments

Oleksandr Pyrozhok · Accepted Answer · 2019-12-29 14:12:56Z

I have exactly the same behavior. Debugger word in code works, but vscode red dot regular breakpoints doesn't. I tried many fixes and combinations with sourceMapOverrides paths, but finally only set my devtools sourcemaps type to cheap-module-eval-sourcemap solve problem for my project!

In your webpack.mix try this line:

mix.webpackConfig({ devtool: 'cheap-module-eval-sourcemap' })

See my github comment and issue to get more details

Maybe it would be good to try all of that types if that does not working

Here is my debug config:

{
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost",
      "webRoot": "${workspaceFolder}/public",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
            "webpack:///resources/js/*.vue": "${workspaceFolder}/resources/js/*.vue",
            "webpack:///./resources/js/*.js": "${workspaceFolder}/resources/js/*.js",
             "webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
       },
},

Mohamed Saleh · Accepted Answer · 2022-09-10 22:26:27Z

0

Another solution is to use VueJS chrome dev tool extension from here
as advised is this answer here

answered Sep 10, 2022 at 22:26

Mohamed Saleh

3,3672 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

VS Code - Debugging VUE component in Laravel project - Unverified breakpoint

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related