简介
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，现在已经可以在Firefox和Safari中安装。这可以提高我们的调试效率。
商店直接安装
Chrome Extension https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Firefox Addon https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools
Workaround for Safari https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-safari.md
手动安装
- Github下载
https://github.com/vuejs/vue-devtools.git
推荐讲文件下载到浏览器插件文件夹中。正常情况下，Chrome插件扩展程序的默认安装目录如下：
windows7中chrome插件默认安装目录位置:
C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\ExtensionsMAC中chrome插件默认安装目录位置：
~/Library/Application Support/Google/Chrome/Default/ExtensionsUbuntu中chrome插件默认安装目录位置：
~/.config/google-chrome/Default/Extensions
如果在这些不同操作系统中的chrome插件默认安装位置，没有找到插件。那么请通过下面的方式查看,如下图所示：
- 地址栏输入chrome:version 回车
- 用资源管理器打开"个人资料路径"栏的路径,该路径下的Extensions文件夹即默认的扩展安装路径
- 进入下载的目录安装所需npm依赖包，编译文件
yarn install 安装所需npm依赖包
yarn run build 编译文件
- 添加至chrome游览器
浏览器输入地址“chrome://extensions/”进入扩展程序页面，将文件夹拖入浏览器即可
3.1 打开开发者模式
3.2 加载已解压的扩展程序
3.3 选择目录下packages/shell-chrome
安装成功后开启项目后再控制台中会有如下显示。
