vue devtools 安装，调试实践

vue-devtools是一款基于Vue项目的浏览器的扩展插件，用于调试vue项目程序，它可以极大的方便我们的查看和调试组件，提高我们的开发效率。

既然是插件，就需要我们安装它。

1.首先从vue官网打开 vue-devtools 的github项目 (https://github.com/vuejs/vue-devtools)

2.copy github项目的地址

3.在新建的文件夹中 Shift + 鼠标右键 选择Git Bash Here在当前文件夹中打开git命令行界面

4.执行 git clone https://github.com/vuejs/vue-devtools

5.第四步执行完后的目录结构是这样子：

6.执行npm install

7.npm run build

8.打开Chrome 浏览器 输入: chrome://extensions/

.

9.点击已解压的扩展程序

选择shell-chrom文件夹

.

11.重启浏览器，启动vue项目，打开console

 

调试：点击最后的console 面板中的Vue,然后点击页面dom元素，在console就会看到对应的组件和右侧的数据

这里附上git上的一般安装的步骤和要求：

Manual Installation

This is only necessary when you want to build the extension yourself from source to get not-yet-released features.

Make sure you are using Node 6+ and NPM 3+

1. Clone this repo
2. cd vue-devtools the newly created folder
3. run yarn install
4. then run yarn run build
5. Open the Chrome extension page (currently under Menu > More Tools > Extensions)
6. Check "developer mode" on the top-right corner
7. Click the "load unpacked" button on the left, and choose the folder: vue-devtools/packages/shell-chrome/
8. Alternatilvely to step 3, you can also use yarn dev:chrome to build & watch the unpacked extension