一、下载vue-devtools,下载地址:https://github.com/vuejs/vue-devtools
二、解压到对应目录,例如: D:\软件\vue-devtools-dev
三、进入解压的目录中
1.执行命令:npm install (需要静心等待一会)
2.执行命令:npm run build
3.修改配置文件,D:\软件\vue-devtools-dev\shells\chrome目录manifest.json文件里的"persistent":false改成true
4.打开扩展程序页面,然后点击"加载已解压的扩展程序 ",选择D:\软件\vue-devtools-dev\shells\chrome
5.在插件目录vue-devtools-dev下执行命令npm run dev,这样插件就会安装在浏览器中了。
打开localhost:8080可以看到插件已经安装并运行了
在vue项目页面下,按F12就可以看到vue面板
注:如果后期vue面板出不来,再到vue-devtools-dev文件夹下执行一遍npm run dev即可
ps :
如果图标亮但不能调试并且提示:
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是压缩版本的,默认会关闭调试,要引入vue.js。
另外种方法是在或者在代码的主文件中配置vue的环境:
Vue.config.devtools = true;
(该方法没有亲测)