vue-devtools——多环境下的安装经验

前言

最近在学习Vue，自然接触到了vue的调试工具vue-devtools，所以试着按文档安装一下。vue-devtools给vue应用的开发带来的方便就不多说了，下面主要总结一下自己的安装过程，参考自vue-devtools的GitHub文档。

应用商店下载安装

vue-devtools可以直接在chrome的应用商店下载，十分简单，这里不介绍了，只要你能翻墙。

chrome环境下的手动安装

本地创建一个目录，然后在vue-devtools的GitHub上下载v4.1.4的版本并解压到该目录下。
我使用nvm管理自己的node版本，安装了最新的v10.8.0作为node环境。
安装项目所需的npm包

// 在packagejson文件所在目录下执行
npm install
// 但由于速度太慢，我使用淘宝镜像来安装，执行如下
'npm install -g cnpm --registry=https://registry.npm.taobao.org'
cnpm install

编译项目文件

// 在packagejson文件所在目录下
npm run build

安装至chrome浏览器

浏览器输入地址"chrome://extensions/"进入扩展程序页面；
点击'加载已解压的扩展程序...'按钮，然后选择'vue-devtools>shells>chrome'文件夹。
如果看不见'加载已解压的扩展程序...'按钮，则需要勾选'开发者模式'。

添加完成后插件如下：

安装完后，在浏览器打开vue应用，打开Chrome开发者工具后，会看到一个vue的选项，点击该选项就能调试了

在firefox上使用

如果要在firefox上使用，请在执行完上面的第三步后，安装web-ext

npm install --global web-ext

然后编译运行firefox浏览器

npm run build
npm run run:firefox

上述指令会打开firefox浏览器，你便可在打开的窗口运行调试vue应用了。

在safari或移动端浏览器上使用

如果你希望在所有浏览器中使用vue-devtools，那可以按如下步骤安装

安装工具

// 全局安装，也可本地安装
npm install -g @vue/devtools

运行

vue-devtools // 适用于全局安装

该指令会打开一个窗口，如下所示

如果你想在电脑浏览器调试，则在vue应用的最顶部加上

如果你想在移动端浏览器调试，则在vue应用的最顶部加上

运行后如下图

遇到新问题

任何事情都不可能一帆风顺的，特别是安装调试。这次安装vue-devtools，最开始是在GitHub上clone了最新的版本v4.1.5，考虑该版本是几天前发布的，所以我使用最新的node版本v10.8.0作为安装环境。然后执行npm install和npm run build指令都很顺利，然后把插件安装到Chrome上，貌似一切都很顺利，谁知把vue应用在浏览器打开，然后打开vue调试界面，立即控制台便打印Uncaught TypeError: Cannot read property 'children' of undefined: backend.js，并且无法展示vue的components。本人在GitHub上开了一个#issue，哪位大神知道怎么解决的可以帮忙解答一下。

附录

如果哪位看官也遇到问题，安装不了工具，可以直接下载我编译好的vue-devtools-4.1.4，体验开发的乐趣。谢谢！

百度网盘地址：'https://pan.baidu.com/s/1crjs_Q1qXhcH3FhOffFO8A'，如果链接失效请联系我。

更新

问题：在项目中使用遇到一个问题，就是插件已经安装好，进入有Vue项目的页面，开发工具中Vue图标也高亮了，但就是没有Vue选项。已经勾选了开发者模式诸如此类的按钮了，在其他项目也可以显示Vue选项，但这里就是不行。
解决方法：原因是我一直打开开发工具，当进入Vue项目的页面时，开发工具没有刷新，所以Vue选项没出现，只要在该页面关掉开发工具，再打开就可以了。