Sourcemaps for debugging inside IDE (phpstorm) instead of devtools

• Laravel Mix Version: 1.4.2 (npm list --depth=0)
• Node Version (node -v): 6.10.3
• NPM Version (npm -v): 3.10.10
• OS: Windows 10

Description:

I would like to use breakpoints in phpstorm instead of chrome’s devtools. I’m not sure if the sourcemaps or laravel-mix are the real cause here.

To allow setting breakpoints in phpstorm, I have to change in the settings the file type for .vue to be considered as a HTML extension.

Using a recent default installation or Laravel 5.4.31 Using mix defaults with version and sourceMaps :

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

I have a few components in /resources/assets/js/components as .vue single files (template+script) They are defined in /resources/assets/js/app.js.

I’m using the package vuetable

"vuetable-2": "^1.6.5"

I had to use also these packages to allow sourcemaps with vuetable

"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-stage-2": "^6.24.1",

Steps To Reproduce:

Since laravel ships with a an Example.vue component, a fresh install with mix file changes above, composer install, npm install should do it.

In phpstorm, i setup a  Javascript Debug config.

Breakpoints work in the file /resources/assets/js/app.js, even the Vue extend for #app

However, it does not work for the component files, such as /resources/assets/js/components/Example.vue

In Chrome devtools, i see weird things, the source for the vue files are at the root of webpack:// and they contain the actual code that was in the vue files, but there is also copies (twice, one with a prefix) in webpack://./resources/assets/js/components/ with same file name, but content seems to be the generated es2015 code.

Also, the Vuetable components located in a subfolder or nodemodules/vuetable-2 have the same result (the source code is at the root of webpack://)

I think that phpstorm expects to have the original source at these copies location.

I wonder if I move my components sourcecode in js files and export default…

[isometriq]

This is the same issue: https://github.com/Microsoft/vscode-chrome-debug/issues/430

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.