vue.js devtools 插件是一个非常易于使用的Vue.js调试器。该插件支持谷歌、360、火狐等浏览器使用。新版本6.0 现已发布。安装后，您可以使用浏览器开发人员工具调试代码。请尝试一下。

【安装教程】

1. 如何使用Chrome插件

1.您可以从Chrome应用商店找到Vue.js devtools插件。如果您无法打开Chrome应用商店，您可以在本站底部找到Vue.js devtools的地址。

2. 对于Chrome 插件的离线安装，请参阅如何在Google Chrome 中安装.crx 扩展程序。如果您使用的是最新版本的Chrome，请参阅从Chrome 67 开始修复无法离线安装的CRX 样式插件的问题。

3. 安装Vue.js devtools crx 文件后，打开Chrome 扩展页面（位于chrome://extensions/或按Chrome 菜单图标“更多工具扩展”）并将crx 文件拖放到扩展中。到您的页面。安装它。

4. 单击“添加扩展”完成安装。

5、Vue.js devtool插件安装后无法使用，并显示“vue.js not detector”提示。在这种情况下，您可以使用以下方法：

首先，你需要找到Vue.js devtool插件的安装目录。 （如果确实找不到插件安装位置，可以在本地计算机上搜索插件ID：nhdogjmejiglipccpnnnanhbledajbpd。）Chrome插件的安装位置取决于您的操作系统。例如Win8系统上Chrome插件的安装位置：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd

接下来，找到Vue.js devtool插件的安装目录后，打开mainifest.json文件（这是关键）。

将mainfest.json 中的代码从permanent: false 更改为permanent: true。

一般情况下，您可以更改上述位置的代码。打开vue项目后，在控制台选择vue，应该就可以成功使用了。

第三，如果按照上述方法调整后仍然无法使用，可以调整webpack.config.js中的代码，如下图所示。

最后，重新启动你的vue项目，你应该就可以使用它了。

2.如何安装源码

1.githubdevtools源码地址：https://github.com/vuejs/vue-devtools。

2、然后进入vue-devtools-master项目，运行cnpm install、dependency、npm run build编译源程序。

3. 编译完成后，您的目录结构应如下所示：

将shells-chrome 目录下的mainifest.json 中的persist 修改为true。

4. Google Chrome设置---打开扩展程序并勾选开发者模式

接下来，将刚刚编译的项目的shell 目录中的整个chrome 文件夹直接拖放到当前浏览器中，然后选择启用以将插件安装到浏览器中。

5.打开现有的vue项目并运行该项目并在浏览器---设置---其他工具---开发人员工具中进入调试模式。

如果发现检测不到vue.js，可以调整webpack.config.js中的代码。

最后，重新启动你的vue项目，你应该就可以使用它了。

摘要：安装Vue.js devtool插件后，出现“vue.js not detector”的问题。首先，在扩展中选择开发者模式，打开插件安装目录，并设置持久化。如果设置mainifest.json 为true 不起作用，请调整webpack.config.js 中的代码，最后重新启动vue 项目即可使用它。