vue-devtools安装

简介

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

手动安装

1. Github下载

https://github.com/vuejs/vue-devtools.git

推荐讲文件下载到浏览器插件文件夹中。正常情况下，Chrome插件扩展程序的默认安装目录如下：

• windows7中chrome插件默认安装目录位置:
  C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions

• MAC中chrome插件默认安装目录位置：
  ~/Library/Application Support/Google/Chrome/Default/Extensions

• Ubuntu中chrome插件默认安装目录位置：
  ~/.config/google-chrome/Default/Extensions

如果在这些不同操作系统中的chrome插件默认安装位置，没有找到插件。那么请通过下面的方式查看,如下图所示：

• 地址栏输入chrome:version 回车
• 用资源管理器打开"个人资料路径"栏的路径,该路径下的Extensions文件夹即默认的扩展安装路径

Chrome version

2. 进入下载的目录安装所需npm依赖包，编译文件

yarn install  安装所需npm依赖包
yarn run build  编译文件

3. 添加至chrome游览器

浏览器输入地址“chrome://extensions/”进入扩展程序页面，将文件夹拖入浏览器即可

image.png

3.1 打开开发者模式
3.2 加载已解压的扩展程序
3.3 选择目录下packages/shell-chrome

安装成功后开启项目后再控制台中会有如下显示。

Chrome vue-devtools