vue-dev-tools安装踩坑
vue-dev-tools是一款可以方便我们在浏览器调试我们vue项目的工具,今天总结一下我安装过程中才到的坑以及解决办法。
why
在百度上,我们可以搜索到很多版本的 dev-tools,但是现在vue3的普及,让老版本貌似有点不支持。要想让你的vue3项目也可以使用了调试工具,你需要安装最新版本的dev-tools。(ps:这里也是一个坑,就是你写vue3代码的时候发现dev-tools怎么也用不了,具体也找不出原因,最终发现需要安装最新版)。
download
作为一名程序员,最新版本的我们肯定是要去github中下载的。
在这里就会有很多的版本,这里又有一个坑了,需要下载的应该是最新的稳定版本,开发版本最后是不可以安装成功的。
目前我这里的开发版最新是下面版本
稳定版如下
一定一定要下载最新版本哦
安装
下载之后解压
以往的经验,我们第一想法肯定就是把这个文件夹拖到chrome中了
但是问题来了。直接拖进去报错了
what?缺少文件或者不能加载?我这可是官网下载的好不好。
一同百度之后发现代码需要 安装库和构建
cd devtools-5.3.4
yarn or npm install
yarn build or npm run build
之前说不能安装开发版就是最后build的时候会报错(不要问我怎么知道 i(╯°□°)╯︵ ┻━┻)
接下来就是要将构建好的文件夹拖到浏览器中了
文件对应如下,大家自己找一下哈,我百度看到说的文件和我这里有出入,可能是版本问题,但是通过文件名称还是很好认的。
将将~ 安装完成啦