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-devnpm 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> chromedriver@2.33.2 install D:\vue-devtools-master\node_modules\chromedriver> node install.jsDownloading https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.zipSaving to C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.zipChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.112:443npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):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 ELIFECYCLEnpm ERR! errno 1npm ERR! chromedriver@2.33.2 install: `node install.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the chromedriver@2.33.2 install script.npm ERR! This is probably not a problem with npm. There is likely additional logging 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-02T03_11_48_793Z-debug.logD:\vue-devtools-master>npm install cross-env --save-devnpm notice created a lockfile as package-lock.json. You should commit this file.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ cross-env@5.1.1added 116 packages and updated 1 package in 17.389sD:\vue-devtools-master>npm install> chromedriver@2.33.2 install D:\vue-devtools-master\node_modules\chromedriver> node install.jsDownloading https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.zipSaving to C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.zipReceived 781K...Received 1568K...Received 2352K...Received 3136K...Received 3920K...Received 4125K total.Extracting zip contentsCopying to target path D:\vue-devtools-master\node_modules\chromedriver\lib\chromedriverDone. ChromeDriver binary available at D:\vue-devtools-master\node_modules\chromedriver\lib\chromedriver\chromedriver.exenpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):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.018sD:\vue-devtools-master>