一波三折之chrome vue-devtools安装及使用
古人云:工欲善其事, 必先利其器。
用vue-devtools来调试开发vue项目能事半功倍吗?先用起来~
谈谈我从安装到使用vue-devtools遇到的一些问题吧 ~~~
**1.**首先通过github下载压缩包:https://github.com/vuejs/vue-devtools
或者通过git命令: git clone https://github.com/vuejs/vue-devtools
----这里如果是git克隆的小伙伴,需要耐心的等待下,需要些时间才能下载下来。
**2.**进入vue-devtools目录:cd vue-devtools,安装依赖:cnpm install
**3.**编译项目文件:npm run build
----到第三步遇到了问题,build报错。这里可能是第二步使用npm安装依赖没有安装完全。于是我又一番百度后决定使用yarn命令来下载安装依赖,简单介绍下yarn吧:
yarn是facebook发布的一款取代npm的包管理工具。
yarn的特点:
速度超快。
Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。
超级安全。
在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。
超级可靠。
使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。
使用npm安装yarn:npm install -g yarn
查看yarn版本:yarn --version
以上安装好了yarn后,我们就可以用yarn安装vue-devtools的依赖啦:yarn install
依赖安装完毕,继续走第三步编译项目文件:npm run build。
**4.**修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 persistent参数改为true。
----我在这一步又遇到了问题!我的项目没有shells文件啊!只看到了packages文件里有个shell-chrome文件:
这当时可把我搞蒙了!经过一番脑洞后突发奇想,也许就是这个文件!只是文件展现的方式不一样,于是我就copy了这个文件夹放在了外层目录命名为chrome,在外层目录建立个文件命名为shell,再把刚刚命名的chrome移至shell文件中,这样vue-devtools项目底下就有了shells\chrome啦!
**5.**扩展Chrome插件
Chrome浏览器 > 更多程序 > 拓展程序
点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入:
安装成功后你会发现你的Chrome扩展程序里多了vue.js.devtools。如下图:
**6.**重启Chrome,启动本地vue项目,在Chrome里打开f12调试工具,会发现:
开始你的vue调试吧!