Vue DevTools可使用修正方法

4,337 阅读1分钟
原文链接: blog.csdn.net

因为工作要求,目前主要在用Vue.js技术栈做开发,调试是必不可少的,这里会用的Vue DevTools的调试工具,问题就出在这里,当用Vue DevTools做调试时,很多时候都不能用,提示没有监测到Vue,这让工作效率瞬间拉低了。


修正Vue DevTools

好了,开始正题,下面来说一下修正的方法。

先从官网把Vue DevTools下载下来(https: //github.com/vuejs/vue-devtools)。

关键步骤一.修改persistent

找到文件vue-devtools/shells/chrome/manifest.json,修改persistenttrue

保存后,编译一下:

关键步骤二.勾选允许访问文件网址

上一步已经把Vue DevTools写好了,接下来是安装这个扩展。

打开Chrome,在地址栏输入chrome://extensions/,直接进入Chrome的扩展。

勾选最上方的开发者模式,再点击“加载已解压的扩展程序…”,路径为:vue-devtools-master/shells/chrome

勾选允许访问文件网址

关键步骤三.加入Vue文件中加入Vue.config.devtools

Vue.config.devtools = true; //这步很重要
new Vue({
    el: '#app',
    data: {
        a: 123,
    }
}); 

搞定!


效果


下载


博客名称:王乐平博客

CSDN博客地址:blog.csdn.net/lecepin

知识共享许可协议 本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。