VueJS DevTools(vuejs devtools查看路由)

VueJS DevTools是基于谷歌浏览器的一款调试VueJS应用的开发者浏览器扩展插件，可以让你在浏览器开发者工具下调试代码，做为前端开发的IT工程师应该比较不会陌生。它支持用户一边查看侧边栏窗格中的页面，一边边检查代码。那为什么要开发这款插件呢？那是因为由于Vue是数据驱动的，所以这就存在开发者在浏览器的开发调试中查看DOM结构并不能解析出什么，但是借助VueJS DevTools插件，它能允许用户在一个更友好的界面中审查和调试 Vue 应用开发者就可以很容易的对数据结构进行解析和调试，从而提高开发质量和工作效率。

安装教程

1、在本站下载Vue Devtools插件压缩包，解压rar包
2、使用cmd命令行进入插件目录，输入一下命令(使用该命令必须确保安装了NodeJS)：
npm install
npm run build
3、修改shells>chrome文件夹下的mainifest.json 中的persistant为true

4、我们找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中，完成安装。
(注意：如果我们没有执行第四部的npm run build，在这里会报错：无法加载背景脚本"build/background.js")
5、在插件的目录下执行npm run dev，这个时候我们的插件就可以运行了,打开localhost:8100可以看到插件已经安装并运行了，注意端口号。

6、我们在打开本地的其他项目时，就不需要在vue-devtools文件夹下执行npm run dev了，因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。

更新：如果后期vue面板不出来，再到vue-devtools文件夹下执行一遍npm run dev。

常见问题

Q：Chrome67版本后无法拖拽安装crx格式插件
1、打开开发者模式即可
浏览器右上角菜单 -> 设置 -> 扩展程序 -> 开发者模式

2、修改参数
在浏览器地址栏输入地址：chrome://flags/#extensions-on-chrome-urls后，将 disabled 改为 enable 重启即可

3、修改文件格式，加载扩展程序
有时候要在 chrome安装本地插件时，会报错，这时候将插件的后缀名 .crx 改为 .zip或者 .rar，然后将改好后缀名的文件解压到本地文件夹中，然后在 chrome 的设置 -> 更多工具 -> 扩展程序，在上图中的加载已解压的扩展程序，找到刚才的解压的扩展程序即可。

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的官方插件,vue-devtools。在控制台直接追踪查看vue的变化

安装VUE的方法有两种：第一种方法：需正常打开亩唤chrome商店，搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展迅拿凯程序下启用；第二种方法：github下载插件，npm包安装依赖，拖入浏览器扩展程序。具体操作如下：1、下载chrome扩展插件。在github上下载压缩包并解压敏纳到本地。2、npm install下载完成后打开命令行cmd进入vue-devtools-master文件夹。3、 打开shells>chrome>manifest.json并把json文件里的persistent：false改成true。4、扩展chrome插件。打开chrome浏览器，打开更多工具>扩展程序；再点击加载已解压的扩展程序，然后把shells>chrome文件夹放入。5、测试安装成功。在插件的目录下执行npm run dev，这个时候的插件就可以运行了。

解决安装Vue.js devtools后出现Vue.js not detected

在我安装vue.js devtools之后，此插件状态一直是灰色，鼠标防止在此插件上时会显示Vue.js not detected。但是打开打开Bilibili（ https://www.bilibili.com/ ，B站是用闷基渗的vue），你就可以发现这个图标变绿。证明此插件是可以使用的。网上给出的答案也大部分都是重新安装此插件，但是我在扩展程序里面有个详细信息接下来点开详细信息会发现在打开此选项之后，再进入我们自己编写的vue的页面，进行刷新，就会发现原先蚂脊是灰色的插件状态现在已经变成了绿色。并且打开控制台的时候。也发现此插件可以正锋嫌常使用。特此记录下