Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve SourceMap Handling #1163

Closed
auchenberg opened this issue Feb 14, 2018 · 12 comments

Comments

Projects
None yet
@auchenberg
Copy link

commented Feb 14, 2018

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:
    chromw1

  • 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.
    chrome2

  • 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.

screen shot 2018-02-13 at 5 19 29 pm

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.

chrome3

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

@znck

This comment has been minimized.

Copy link
Member

commented Mar 18, 2018

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

This comment has been minimized.

Copy link

commented Apr 1, 2018

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

@eladcandroid

This comment has been minimized.

Copy link

commented Apr 24, 2018

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

@xeor

This comment has been minimized.

Copy link

commented Apr 25, 2018

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

@gzzhanghao

This comment has been minimized.

Copy link

commented Apr 25, 2018

Related pr: babel/babel#7761

@loganfsmyth

This comment has been minimized.

Copy link

commented Apr 26, 2018

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.

@sobolevn

This comment has been minimized.

Copy link

commented May 9, 2018

@loganfsmyth Thanks for addressing this! Unfortunately, still having some troubles: octref/veturpack#13 (comment)

@yyx990803

This comment has been minimized.

Copy link
Member

commented May 11, 2018

@loganfsmyth this is awesome, can't wait for it to land in 7.x. I've tested it with babel-core@6.26.3 and it works perfectly now (able to set breakpoints in devtools as well)!

@qiulang

This comment has been minimized.

Copy link

commented May 15, 2018

I upgraded babel-core@6.22 to babel-core@6.26, it did fix the "sliding breakpoints" for me!

@gkatsanos

This comment has been minimized.

Copy link

commented Jul 10, 2018

I would like to bring your attention to a related bug I raised in JETBRAINS/Webstorm which might be related to how vue-loader handles source maps. : https://youtrack.jetbrains.com/issue/WEB-33793
I also raised this in the webpack issue tracker: webpack/webpack#7199
The issue still stands for latest Babel-core 6.26

@rjgotten

This comment has been minimized.

Copy link

commented Aug 27, 2018

So... has anyone ever figure out what is generating and publishing all the weird intermediate source maps?

Frankly, that trash - And really; it is trash. It serves absolutely zero purpose. - has been growing to be such an eye-sore and impediment - Think developer ergonomics. - that I've begun considering writing a Webpack plugin to post-process the produced source maps collection, with the explicit goal of forcefully evicting everything that matches the /\.vue\?[a-z0-9]{4}$/ regex.

@yyx990803

This comment has been minimized.

Copy link
Member

commented Aug 27, 2018

@rjgotten this was mostly caused by Babel not expecting the source map being passed on for new source map generation. This has been fixed in the latest versions of Babel. If you have other cases where Source Maps are not working properly, please open a separate issue with proper information.

@yyx990803 yyx990803 closed this Aug 27, 2018

@vuejs vuejs locked as resolved and limited conversation to collaborators Aug 27, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.