I'll be looking into that in a few minutes. Chrome and Firefox surprisingly pick up ont he source map straight away, just in VS it's nowhere to be found, as you can see in the screenshot (2).
Okay, so the generated source map includes:
- Code: Select all
,"webpack:///./resources/assets/js/components/DatatableAsync.vue"
When I set a breakpoint in the file, it will break at a random line inside a different file however.
Edit... okay, I'm stupid and didn't realize that it works fine in js files. It doesn't however work in .vue files, which is where most of my code is.
Apparently the vue file content is put together into a "sourcesContent":["", ..] member. Debugging it in Chrome itself works because it "gets it from the source map" - assuming its from the sourceContent string. The actual mapped file in the ./resources/assets/js/components/*.vue contains something weird.
- Code: Select all
var disposed = false
var normalizeComponent = require("!../../../../node_modules/vue-loader/lib/component-normalizer")
/* script */
export * from "!!babel-loader?{\"cacheDirectory\":true,\"presets\":[[\"env\",{\"modules\":false,\"targets\":{\"browsers\":\"> 1%\",\"uglify\":true},\"useBuiltIns\":true}]],\"plugins\":[]}!../../../../node_modules/vue-loader/lib/selector?type=script&index=0!./DatatableAsync.vue"
import __vue_script__ from "!!babel-loader?{\"cacheDirectory\":true,\"presets\":[[\"env\",{\"modules\":false,\"targets\":{\"browsers\":\"> 1%\",\"uglify\":true},\"useBuiltIns\":true}]],\"plugins\":[]}!../../../../node_modules/vue-loader/lib/selector?type=script&index=0!./DatatableAsync.vue"
/* template */
import __vue_template__ from "!!../../../../node_modules/vue-loader/lib/template-compiler/index?{\"id\":\"data-v-1b70b46f\",\"hasScoped\":false,\"buble\":{\"transforms\":{}}}!../../../../node_modules/vue-loader/lib/selector?type=template&index=0!./DatatableAsync.vue"
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = null
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__vue_script__,
__vue_template__,
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "resources/assets/js/components/DatatableAsync.vue"
/* hot reload */
if (module.hot) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-1b70b46f", Component.options)
} else {
hotAPI.reload("data-v-1b70b46f", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
export default Component.exports
//////////////////
// WEBPACK FOOTER
// ./resources/assets/js/components/DatatableAsync.vue
// module id = ./resources/assets/js/components/DatatableAsync.vue
// module chunks = 0
It lists "resource/assets/js/components/*.vue" files seperately from the rest (notice the missing ./)