更好的堆栈跟踪
Better stack trace
我正在将应用程序从 angular.js(版本 1)迁移到 Vue.js 版本 2.4。
我正在从在开发模式下提供原始 Javascript 文件转向使用 Webpack、babel 和 .vue,后者提供处理后的 Javascript 文件。 Webpack 和 Vue.js 对我来说是新的。
当代码中发生异常时,Vue.js 或 Webpack 会拦截错误并打印堆栈跟踪,这没有帮助。下面是一个例子。
我猜测如果 Vue.js/Webpack 没有拦截异常,我可以在浏览器中看到堆栈跟踪以及发生异常的代码。
是否有通过 Vue.js 有效使用浏览器调试器的指南?
我正在使用 Firefox 并安装了 vuedevtools 2.5.9。
[Vue warn]: Error in created hook: "TypeError: not a function"
found in
---> <QueryBuilder> at src/components/querybuilder/QueryBuilder.vue
<Layout> at src/datamanager/Layout.vue
<QueryBuilderPage> at src/datamanager/QueryBuilderPage.vue
<App> at src/datamanager/App.vue
<Root> vue.esm.js:574
TypeError: not a function
Stack trace:
Promise@webpack-internal:///515:126:39
_rights@webpack-internal:///96:338:16
rights@webpack-internal:///96:461:16
created@webpack-internal:///304:241:9
callHook@webpack-internal:///2:2875:9
initMixin/Vue.prototype._init@webpack-internal:///2:4524:5
VueComponent@webpack-internal:///2:4694:7
createComponentInstanceForVnode@webpack-internal:///2:4208:10
init@webpack-internal:///2:4025:45
createComponent@webpack-internal:///2:5483:9
createElm@webpack-internal:///2:5431:9
createChildren@webpack-internal:///2:5554:9
createElm@webpack-internal:///2:5459:9
createChildren@webpack-internal:///2:5554:9
createElm@webpack-internal:///2:5459:9
createChildren@webpack-internal:///2:5554:9
createElm@webpack-internal:///2:5459:9
patch@webpack-internal:///2:5948:7
lifecycleMixin/Vue.prototype._update@webpack-internal:///2:2617:16
updateComponent@webpack-internal:///2:2745:7
get@webpack-internal:///2:3095:13
Watcher@webpack-internal:///2:3084:7
mountComponent@webpack-internal:///2:2752:3
Vue.prototype.$mount@webpack-internal:///2:8359:10
Vue.prototype.$mount@webpack-internal:///2:10699:10
init@webpack-internal:///2:4031:7
createComponent@webpack-internal:///2:5483:9
createElm@webpack-internal:///2:5431:9
patch@webpack-internal:///2:5948:7
lifecycleMixin/Vue.prototype._update@webpack-internal:///2:2617:16
updateComponent@webpack-internal:///2:2745:7
get@webpack-internal:///2:3095:13
Watcher@webpack-internal:///2:3084:7
mountComponent@webpack-internal:///2:2752:3
Vue.prototype.$mount@webpack-internal:///2:8359:10
Vue.prototype.$mount@webpack-internal:///2:10699:10
init@webpack-internal:///2:4031:7
createComponent@webpack-internal:///2:5483:9
createElm@webpack-internal:///2:5431:9
patch@webpack-internal:///2:5987:9
lifecycleMixin/Vue.prototype._update@webpack-internal:///2:2627:16
updateComponent@webpack-internal:///2:2745:7
get@webpack-internal:///2:3095:13
run@webpack-internal:///2:3172:17
flushSchedulerQueue@webpack-internal:///2:2934:5
nextTick/<@webpack-internal:///2:1796:9
flushCallbacks@webpack-internal:///2:1717:5
vue.esm.js:1699
问题似乎是 Firefox 没有提供带有 Vue.js 的交互式堆栈跟踪,或者我的构建有问题。
我切换到 Chrome 并获得了一个非常有用的工具。堆栈跟踪显示来自原始文件的信息。我可以单击以转到该文件。我可以设置断点,尽管这些行似乎已关闭(我确定是由于源映射)。
一旦我有了功能配置,我对文档的迫切需求就消失了。
我正在将应用程序从 angular.js(版本 1)迁移到 Vue.js 版本 2.4。
我正在从在开发模式下提供原始 Javascript 文件转向使用 Webpack、babel 和 .vue,后者提供处理后的 Javascript 文件。 Webpack 和 Vue.js 对我来说是新的。
当代码中发生异常时,Vue.js 或 Webpack 会拦截错误并打印堆栈跟踪,这没有帮助。下面是一个例子。
我猜测如果 Vue.js/Webpack 没有拦截异常,我可以在浏览器中看到堆栈跟踪以及发生异常的代码。
是否有通过 Vue.js 有效使用浏览器调试器的指南?
我正在使用 Firefox 并安装了 vuedevtools 2.5.9。
[Vue warn]: Error in created hook: "TypeError: not a function"
found in
---> <QueryBuilder> at src/components/querybuilder/QueryBuilder.vue
<Layout> at src/datamanager/Layout.vue
<QueryBuilderPage> at src/datamanager/QueryBuilderPage.vue
<App> at src/datamanager/App.vue
<Root> vue.esm.js:574
TypeError: not a function
Stack trace:
Promise@webpack-internal:///515:126:39
_rights@webpack-internal:///96:338:16
rights@webpack-internal:///96:461:16
created@webpack-internal:///304:241:9
callHook@webpack-internal:///2:2875:9
initMixin/Vue.prototype._init@webpack-internal:///2:4524:5
VueComponent@webpack-internal:///2:4694:7
createComponentInstanceForVnode@webpack-internal:///2:4208:10
init@webpack-internal:///2:4025:45
createComponent@webpack-internal:///2:5483:9
createElm@webpack-internal:///2:5431:9
createChildren@webpack-internal:///2:5554:9
createElm@webpack-internal:///2:5459:9
createChildren@webpack-internal:///2:5554:9
createElm@webpack-internal:///2:5459:9
createChildren@webpack-internal:///2:5554:9
createElm@webpack-internal:///2:5459:9
patch@webpack-internal:///2:5948:7
lifecycleMixin/Vue.prototype._update@webpack-internal:///2:2617:16
updateComponent@webpack-internal:///2:2745:7
get@webpack-internal:///2:3095:13
Watcher@webpack-internal:///2:3084:7
mountComponent@webpack-internal:///2:2752:3
Vue.prototype.$mount@webpack-internal:///2:8359:10
Vue.prototype.$mount@webpack-internal:///2:10699:10
init@webpack-internal:///2:4031:7
createComponent@webpack-internal:///2:5483:9
createElm@webpack-internal:///2:5431:9
patch@webpack-internal:///2:5948:7
lifecycleMixin/Vue.prototype._update@webpack-internal:///2:2617:16
updateComponent@webpack-internal:///2:2745:7
get@webpack-internal:///2:3095:13
Watcher@webpack-internal:///2:3084:7
mountComponent@webpack-internal:///2:2752:3
Vue.prototype.$mount@webpack-internal:///2:8359:10
Vue.prototype.$mount@webpack-internal:///2:10699:10
init@webpack-internal:///2:4031:7
createComponent@webpack-internal:///2:5483:9
createElm@webpack-internal:///2:5431:9
patch@webpack-internal:///2:5987:9
lifecycleMixin/Vue.prototype._update@webpack-internal:///2:2627:16
updateComponent@webpack-internal:///2:2745:7
get@webpack-internal:///2:3095:13
run@webpack-internal:///2:3172:17
flushSchedulerQueue@webpack-internal:///2:2934:5
nextTick/<@webpack-internal:///2:1796:9
flushCallbacks@webpack-internal:///2:1717:5
vue.esm.js:1699
问题似乎是 Firefox 没有提供带有 Vue.js 的交互式堆栈跟踪,或者我的构建有问题。
我切换到 Chrome 并获得了一个非常有用的工具。堆栈跟踪显示来自原始文件的信息。我可以单击以转到该文件。我可以设置断点,尽管这些行似乎已关闭(我确定是由于源映射)。
一旦我有了功能配置,我对文档的迫切需求就消失了。