vue.js devtools 怎么使用 chrome
devtools 是chrome的插件,安装上,然后你调试你的vue项目就会自动调用这个插件了
解决安装Vue.js devtools后出现Vue.js not detected
在我安装vue.js devtools之后，此插件状态一直是灰色，鼠标防止在此插件上时会显示Vue.js not detected。但是打开打开Bilibili（ ，B站是用的vue），你就可以发现这个图标变绿。证明此插件是可以使用的。网上给出的答案也大部分都是重新安装此插件，但是我在扩展程序里面有个详细信息
接下来点开详细信息会发现
在打开此选项之后，再进入我们自己编写的vue的页面，进行刷新，就会发现原先是灰色的插件状态现在已经变成了绿色。并且打开控制台的时候。也发现此插件可以正常使用。特此记录下
怎么安装VUE的官方插件,vue-devtools。在控制台直接追踪查看vue的变化
安装VUE的方法有两种：
第一种方法：需正常打开chrome商店，搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用；
第二种方法：github下载插件，npm包安装依赖，拖入浏览器扩展程序。具体操作如下：
1、下载chrome扩展插件。在github上下载压缩包并解压到本地。
2、npm install下载完成后打开命令行cmd进入vue-devtools-master文件夹。
3、 打开shellschromemanifest.json并把json文件里的persistent：false改成true。
4、扩展chrome插件。打开chrome浏览器，打开更多工具扩展程序；再点击加载已解压的扩展程序，然后把shellschrome文件夹放入。
5、测试安装成功。在插件的目录下执行npm run dev，这个时候的插件就可以运行了。
Vuejs的VueTool工具开启失败解决方案
有时候我们明明打开了devtool设置为true，并按chrome上安装了vueTool后，发现还是没有在控制台里显示vue的tool等问题
1、如果是没有安装vueTool，可以到chrome的扩展里面选择并安装
如果是没有科学上W的话可以github上手动down下仓库来安装
然后就是扩展Chrome插件
打开Chrome浏览器 选择更多工具扩展程序打开开发者模式
点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹，选择 vue-devtools shells chrome 放入, 安装成功如上面的图1
下方是可能可以看到vueTool了，但是在控制台就是出不来的情况
2、检查下vue.config.js的devtool是否打开，默认是true，看看是不是在非生产环境也设置为false了
3、检查看看是否有手动启用CDN加速Vuejs的文件，按官网说的，我们开发环境也需要使用开发版本的vuejs，否则很多警告就会不生效，比如props的校验器等
检查public.html的vuejs引用(如果是按脚手架的则无需关注)
确认以上问题以后，我们重新安装依赖并且重新跑脚手架编译。
vue之调试工具DevTools
1.创建一个空文件夹（我命名为vue devtools），
2.进入这个文件夹按住 shift + 右键 选择进入在此处打开powershell 窗口，就可以进入这个文件的终端
3.在终端输入 npm install vue-devtools
完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，进入其中，将vender 文件拖至谷歌浏览器的扩展程序中即可。
进入verder下的 manifest.json ，修改persistent 为 true， 保存。
刷新浏览器扩展程序即可使用。运行vue程序，即可在控制台中看到此调试工具。
vue devtools 在用vue做的网站上会变亮但不能查看其结构。只有在本地运行的项目才能查看。
资料参考：
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
