vue-devtools的chrome扩展程序安装及失败报错解决

直接在https://github.com/vuejs/vue-devtools 或者其他地方下载出来的目录结构呈现如下的，我还是没能运行成功
一、vue-devtools安装 (chrome)（正确亲测有效）
1.下载vue-devtools
网盘资源链接：https://pan.baidu.com/s/14B-CFqMcQxF72aRofWKeVQ
参考教程链接：https://blog.csdn.net/qq_43533416/article/details/101639772
目录结构：

image.png

2.浏览器中设置扩展
chrome设置——>扩展程序——>打开开发者模式——>加载已解压的扩展程序——>选中下载路径的vender包（vue-devtools\vender），打开chrome右上角会有个发绿的“V”的vue标志（发灰的话是vue.js not detected，没有检测到vue，找个有vue的页面打开即可）。

二、vue3.o安装，
直接再应用应用商店搜索，devtools,点击添加chrome，再点添加

image.png

如果同时安装了vue2.o,vue3.o的话，就有两个devtools了，最好关闭一个，用哪个就开哪个，
点击隔壁的扩展程序 ，点即管理程序，不要移除，开关即可，

image.png

image.png

安装了之后Chrome浏览器vue devtools F12后控制台不显示的问题
安装了vue.js devtools调试工具，
安装成功了之浏览器右上角出现了图标，同时在vue的页面下也能点亮，就是控制台没有vue的页签，最后是在扩展程序中开启允许访问文件网址和在隐身模式下启用两项后就可以了。

image.png

image.png

再点上方的刷新即可，

切记;vue2用不了vue3的devtools，反之也是，所以用的时候需要对应的开关，注意有事交换开关的话，项目最好关闭了窗口再重新打开，可能出现chorm检测不了devtools