vue-devtools安装

下载vue-devtools，并解压 ：https://github.com/vuejs/vue-devtools

第一步：找到vue-devtools的github项目，并将其clone到本地. vue-devtools

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

第二步：安装项目所需要的npm包

npm install cross-env --save-dev
npm install

第三步：编译项目文件

npm run build

第四步：添加至chrome游览器

chrome://extensions/

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。

结语：vue-devtools如何使用

当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的，上手非常的容易，这里就细讲其使用说明了。

D:\vue-devtools-master>npm install

> [email protected] install D:\vue-devtools-master\node_modules\chromedriver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.
zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.z
ip
ChromeDriver installation failed Error with http(s) request: Error: connect ETIM
EDOUT 172.217.160.112:443
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-12-02T0
3_11_48_793Z-debug.log

D:\vue-devtools-master>npm install cross-env --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

+ [email protected]
added 116 packages and updated 1 package in 17.389s

D:\vue-devtools-master>npm install

> [email protected] install D:\vue-devtools-master\node_modules\chromedriver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.
zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.z
ip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4125K total.
Extracting zip contents
Copying to target path D:\vue-devtools-master\node_modules\chromedriver\lib\chro
medriver
Done. ChromeDriver binary available at D:\vue-devtools-master\node_modules\chrom
edriver\lib\chromedriver\chromedriver.exe
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

added 164 packages in 27.018s

D:\vue-devtools-master>