search

ktsn / vue-template-loader

Vue.js 2.0 template loader for webpack
MIT License
266 stars 26 forks source link

Template sourcemaps #30

Closed Toilal closed 7 years ago

Toilal commented 7 years ago

When an error occurs, it display stacktrace with the template filename (.html) where the error occurs, but when clicking on the link to dive into code, it shows the compiled render function instead of the source template file.

Do you think it's possible to generate a sourcemap mapping the render function with html file ?

ktsn commented 7 years ago

I guess it can be made easily if we don't support break point. I'll investigate it on this week end.

ktsn commented 7 years ago

Implemented via #31. Will be released as v0.3.1.

Toilal commented 7 years ago

I've made some tests, and it works better but it seems it always point to line 1 of the template file when an error occurs.

I didn't see any changes about CSS sourcesmaps too, in chrome style inspector it should display the css source filename instead of <style>...<style> isn't it ?

ktsn commented 7 years ago

It's because generated source map does not have the information of the positions - it just maps source file and destination file. We need to modify vue-template-compiler to support mapping positions.

About CSS source map, we have to specify sorceMap: true option of css-loader and output css file by using extract-text-webpack-plugin. (See example webpack config)

Toilal commented 7 years ago

Ok ! thanks for the css tip :) good job :+1:

Toilal commented 7 years ago

Just tested and sourceMap: true on css-loader seems to be enough here for CSS to be mapped to sources in browser inspector.