Improve SourceMap Handling

[auchenberg]

We on the VS Code team just released a debugging recipe for Vue.js, to allow our Chrome debugger to debug Vue, and during this release we discovered some fundamental problems with the sourcemaps generated by vue-loader used in the webpack projects generated by vue-cli,

Observed problems

• The generated sourcemaps seems to be invalid and unreadable for tools like https://sokra.github.io/source-map-visualization/

• Stepping in debuggers like Chrome DevTools and VS Code doesn't work as expected, as we experience "sliding breakpoints" caused by missing mappings that causes us to "slide" the breakpoint down to the next line we have mappings for. Causes experiences like:
  

• Mappings for simple statements seems to be missing/wrong, which causes debuggers to load the compiled source, which causes experiences like, where a breakpoint is set on line 94, but is in reality set in a different place.
  

• Generated entries for sourcefiles are added to the sourcemap under the . path, which creates confusion, as the files under ./src are generated outputs, and not the original authoring abstraction. This is causing problems for debuggers like VS Code that relies on mappings between the served bundle and the original original authoring abstraction.

In this example the original authoring abstraction is also referenced under /src/components/HelloWorld.vue

• Using let statements for variables seems to cause problems for the sourcemaps, as both VS Code and Chrome DevTools can't step over the statements, but stays on the same line when using step-over.

Steps to reproduce

1. Generate webpack project by vue-cli
2. Add a few new lines to line 90 in HelloWorld.vue, so you have logic like:

export default {
  name: 'HelloWorld',
  data () {
    var a = 1
    var b = 2
    var c = 3
    var d = a+c
    return {
        msg: 'Welcome to Your Vue.js App' + d
    }
  }
}

• Open up Chrome DevTools or the VS Code debugger, and try to set breakpoints in HelloWorld.vue

Relevant issues

• Problem with sourcemaps #620
• vue-cli recipe not working as intended microsoft/vscode-recipes#74

[znck]

I have raised a pull request sokra/source-map-visualization#24

In the mean time, you may use http://kindly-comb.surge.sh for visualising sourcemaps. (example)

[gzzhanghao]

I've built another sourcemap visualizer recently, and I found sourcemaps from vue-loader is kinda wired. example

[eladcandroid]

Any news about this issue? I'm Still not able to debug correctly with VSCode

[xeor]

I'm in the same boat... Maybe write a little "headsup" in debugging recipe for Vue.js while we wait.

[gzzhanghao]

Related pr: babel/babel#7761

[loganfsmyth]

I've landed babel/babel#7761 and backported it to Babel 6.x in babel/babel#7812. It should now be out and available as babel-core@6.26.3.

I believe it should fix at least some of the problems described here. I haven't worked through them specifically, but I'd expect it to make a big difference.

Please let me know if you run into any issues with the new release. I don't think that many tools actually use inputSourceMap, so Vue is probably likely to be one of the main projects to benefit from this.