chrome安装vue-devtools(离线安装)

时间:2024-02-25 15:46:29

chrome安装vue-devtools(离线安装)

1.去Vue DevTools 项目的官方主页GitHub上下载。因为直接在Chrome应用商店下载需要FQ。

官方地址:https://github.com/vuejs/vue-devtools.git
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

从 github 下载的源码竟然默认是在dev分支的,导致 npm run build各种报错。最后切换到 master 分支才是正常的

2.安装项目所需的依赖包— npm 包

进入下载好的vue-devtools-dev文件夹的目录,通过命令输入以下代码

npm install
3.编辑项目文件
npm run build
4.修改persistent

进入vue-devtools-dev文件夹下的shells -> chrome -> manifest.json ,找到persistent,将其值修改为true

![image-20200523223313549](/Users/xiaoquan/Library/Application Support/typora-user-images/image-20200523223313549.png)

5.添加至Chrome浏览器

1、打开chrome浏览器的扩展程序页面,可通过以下方式进入页面:

![image-20200523223403340](/Users/xiaoquan/Library/Application Support/typora-user-images/image-20200523223403340.png)

2、将chrome
文件(vue-devtools-dev -> shells -> chrome)直接拖进去即可。

6.打开vue项目,vue插件报以下错误
Vue.js is detected on this page. Devtools inspection is not available because it\'s in production mode or explicitly disabled by the author.
Vue.js公司在此页上检测到。Devtools检查不可用,因为它处于生产模式或被作者显式禁用。

在浏览器安装vue Devtools插件后显示
Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author

原因:用的是production mode(生产版本)的vue.min.js,而不是开发版本的vue.js

解决办法:
下载一个开发版本的vue.js, 然后把js文件夹里的vue.min.js(生产版本)换成vue.js,
同时在导入script时把你用的vue.min.js换成vue.js