下载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
> chromedriver@2.33.2 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: fsevents@1.1.3 (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! chromedriver@2.33.2 install: `node install.js`
npm ERR! Exit status 1
npm 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 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: fsevents@1.1.3 (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"}
)
+ cross-env@5.1.1
added 116 packages and updated 1 package in 17.389s
D:\vue-devtools-master>npm install
> chromedriver@2.33.2 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: fsevents@1.1.3 (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>