vue-devtools安装和启用问题
2019-03-05 本文已影响0人
小丘啦啦啦
一、谷歌商店
要翻墙,不解释。
二、crx浏览器插件
链接 提取码: kp64
下载crx文件,然后打开谷歌浏览器的拓展程序
![](https://img.haomeiwen.com/i16326697/a06311a652195f89.png)
调成开发者模式
![](https://img.haomeiwen.com/i16326697/d15572544bd910a2.png)
把crx文件拖动到拓展程序页面进行插件安装
![](https://img.haomeiwen.com/i16326697/9a21bcbc03db2412.png)
给出提示点击添加拓展程序
![](https://img.haomeiwen.com/i16326697/e63ddf493141ed4d.png)
即安装完成
![](https://img.haomeiwen.com/i16326697/366f97139e6e7f60.png)
运行vue程序,在f12进入调试模式即可看到新增的插件
![](https://img.haomeiwen.com/i16326697/18b8c4ed8781b824.png)
三、生效说明
1、测试是否安装成功
访问B站(Vue写的),看浏览器vue-devtools图标是否点亮,点亮即说明工具是安装成功的。
![](https://img.haomeiwen.com/i16326697/d06ce87cab14bbbb.png)
2、测试vue.js文件发现不起作用
学习vue的时候遇到的,用hbuilder工具运行,它会虚拟一个服务器运行
html
文件,vue-devtools可用。![](https://img.haomeiwen.com/i16326697/13289672e0ab2523.png)
但通过vs-code以文件网址方式访问不起作用。
![](https://img.haomeiwen.com/i16326697/b01bb030be0bc4ef.png)
这是应为此工具默认不允许访问文件网站方式。
可以打开扩展程序——点击vue-devtools详细信息——启用允许访问文件网址。
![](https://img.haomeiwen.com/i16326697/9b0a00413ea5ae51.png)
![](https://img.haomeiwen.com/i16326697/b8996c6a9302c82e.png)
![](https://img.haomeiwen.com/i16326697/cec66caeed377c8c.png)
然后就可以了。
![](https://img.haomeiwen.com/i16326697/98d16d7874588e1a.png)