前言
最近在学习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应用的最顶部加上
<script src="http://localhost:8098"></script>
- 如果你想在移动端浏览器调试，则在vue应用的最顶部加上
<script>
window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>
运行后如下图
遇到新问题
任何事情都不可能一帆风顺的，特别是安装调试。这次安装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选项没出现，只要在该页面关掉开发工具，再打开就可以了。
