说明
vue-devtools,亲测有效 最近在学习vue3的相关知识,搭建了一个demo. 当然离不开Vue官方发布了调试工具Vue-Devtools.
- 看了网上多个安装水贴,亲测无效,吐槽一下，网上好多的帖子都告诉你，
- 把 packages\shell-chrome目录修改下，然后导入到Chrome扩展里。
- 亲，这些说的不起效果呀。
- 虽然把src\hook.js文件里的build全部改为src，然后安装到扩展里确实能显示安装了扩展插件。
- 但是：vue-Devtools的快捷键是灰色的。
- 即使修改了 manifest.json的 "persistent": true也没用。
- 打开Vue3的网站后，Vue-Devtools后台会报错。 这是为什么呢？因为以上安装的是源代码，没有编译啊。 自己看帖,实测,总结一套安装方法,希望能帮助你.
安装流程
下载源码
废话不说,直接开干. 没谷歌浏览器的直接安装一波.
首先第一步:进入官网，安装版本在分支上我们选择最新的 v6.0.0-beta.21
点击右侧的 Code 按钮，下拉项中选择 Download ZIP。
另一种clone方式这里就不细讲了...
安装依赖
前提是需要安装好node,npm版本,这里给一个参考链接node安装教程
安装
Vue-Devtools的依赖需要用到yarn，而不是npm，所以首先我们要安装yarn。
命令行进入到解压后的Vue-Devtools目录
执行命令：
npm install -g yarn
安装好yarn，通过yarn来安装依赖
yarn install
依赖安装完成后，开始build。 需要注意，这里的命令带了watch，如果不带watch，会出错。
yarn run build:watch
代码执行一阵后，没有反应，此时Ctrl+C退出即可。
接下来执行
yarn run dev:chrome
我们再看一下打开文件夹看一下目录，就会发现生成了 build目录.然后继续下一步.
安装流程
打开谷歌浏览器输入
chrome://extensions/
点击加载已解压的扩展程序选择目录devtools-6.0.0-beta.21\packages\shell-chrome确定
在扩展栏固定Vue-Devtools图标
Vue-Devtools插件安装完成，打开vue3网站，F12打开调试台，就能看到Vue-Devtools的界面按钮
效果展示
到此安装完成,如遇见vue-devtools图标是灰的
- 第一种: 刚安装完成,可以关闭谷歌浏览器窗口重新进入查看.
- 第二种: 使用vue-devtools工具,你是不是要把你vue的项目跑起来呀.
最后
第一次发帖,走过路过的帅哥美女,动动小手,点个小赞
感谢支持!!
蕾姆,你爱了吗
