CODEWITHSUNDEEP
debugginglaravel-5vue.jsvisual-studio-code
Виталий Комаров
Виталий Комаров

Reputation: 289

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

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.

Upvotes: 2

Views: 7332

Answers (4)

Mohamed Saleh
Mohamed Saleh

Reputation: 3317

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

Upvotes: 0

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

Reputation: 289

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

Upvotes: 3

Oleksandr Pyrozhok
Oleksandr Pyrozhok

Reputation: 436

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/*"
       },
},

Upvotes: 1

Carlos Frias
Carlos Frias

Reputation: 533

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');

Upvotes: 5

Related Questions