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

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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