线上环境如何开启 vue devtools
方法一
打开控制台,运行一下以下代码
var Vue, walker, node;
walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
if (node.__vue__) {
Vue = node.__vue__.$options._base;
if (!Vue.config.devtools) {
Vue.config.devtools = true;
if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
console.log("==> vue devtools now is enabled");
}
}
break;
}
}
显示 vue devtools now is enabled
证明我们已经成功开启了 vue devtools
F12打开,发现多了Vue选项卡,可调试生产vue组件
方法二
chrome应用商店下载插件vue force dev
打开element ui网站,F12 多了Vue选项卡,同样可调试生产vue组件