Re: Does it support JS debugging
Posted: January 21st, 2019, 8:34 pm
Okay, I managed to "fix" the source map, vue source files are now put into the same ./resources/... folder and the files generated from webpack are stashed in webpack-generated://...
It still works in Chrome, breakpoints are hit at the correct line.
When I set the breakpoint in Visual Studio however, it won't be set on the line I set it on, but on the next or one after that. If I'm trying to debug the first statement of a function or an assignment, that's not possible from Visual Studio. The breakpoint isn't only shown in the line after, but also only hit then. When I put the breakpoint in Chrome however, the debugging stops in visual studio at the right place.
Not quite sure what to do from here.
(I fixed the source map for vue files using this in webpack.config.js:
It still works in Chrome, breakpoints are hit at the correct line.
When I set the breakpoint in Visual Studio however, it won't be set on the line I set it on, but on the next or one after that. If I'm trying to debug the first statement of a function or an assignment, that's not possible from Visual Studio. The breakpoint isn't only shown in the line after, but also only hit then. When I put the breakpoint in Chrome however, the debugging stops in visual studio at the right place.
Not quite sure what to do from here.
(I fixed the source map for vue files using this in webpack.config.js:
- Code: Select all
// fix source map for vue files
if(!Encore.isProduction()) {
module.exports.devtool = 'eval-source-map';
module.exports.output.devtoolFallbackModuleFilenameTemplate = 'webpack-fallback:///[resource-path]?[hash]';
module.exports.output.devtoolModuleFilenameTemplate = info => {
const isVue = info.resourcePath.match(/\.vue$/);
const startsWithDot = info.resourcePath.startsWith("./");
if (isVue) {
if (startsWithDot) {
return `webpack-generated:///${info.resourcePath}?${info.hash}`
}
else
return `webpack:///./${info.resourcePath}`;
}
return `webpack:///${info.resourcePath}`;
}
}