chrome安装vue-devtools

 

第一种方法

如果有VPN直接翻墙出去，去chrome商店里直接搜索vue.js devtools然后安装就好

第二种方法

第二种就是clone项目到本地安装   github地址  https://github.com/vuejs/vue-devtools
 

如果有git的话可以用git没有的话就用cmd
clone到本地的项目最好建个文件，放文件里面。
 

clone到本地

git操作

 

cmd

 
clone到本地的文件为vue-devtools点开后示意图

 

进入安装目录

1. cd vue-tools

安装依赖包

1. npm  install   或者用cnpm install 这里用cnpm会快点，但是要修改下

 

修改为cnpm

如果用npm安装的话就不需要这步

1. npm install -g cnpm --registry=https://registry.npm.taobao.org

npm因为是国外的资源会慢点，最好用淘宝维护的cnpm
 
 

修改manifest.json文件

这个文件在vue-devtools\shells\chrome下
打开后将false改成true

 

然后编译

1. cnpm run build 或者npm run build

 

添加chrome扩展插件

在chrome url中输入

1.  chrome://extensions/

将vue-devtools\shells  下的chrome文件直接拖到页面上。
 
vue项目文件用chrome打开，在控制台看到如下则Ok，如果遇到问题则继续往下看

 

解决办法1

看下 chrome://extensions/  中的vue扩展程序中的允许访问文件网址是否打钩

 
2检测你的vue  cdn文件
如果是生产环境的min.js文件则将其替换成开发环境的    https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js 
 
3重写打开浏览器刷新下。