vue开发安装vue-devtools调试工具
为什么要用到vue-devtools调试工具
由于vue是数据驱动的，所以在开发调试的时候查看DOM结构并没有什么卵用。
所以需要借助vue-devtools插件，我们就可以查看数据结构进行解析和调试。
1.下载chrome扩展插件
GitHub下载地址：https://github.com/vuejs/vue-devtools
2.npm install 安装
cmd打开命令行，进入vue-devtools-master文件加，然后运行npm install命令安装工具，
文章图片
进入插件目录.png 
文章图片
image.png 我的这个有报错 ，但是有save操作，所以我还走下一步
如果网速不行可以转淘宝镜像，安装很快
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后用
cnpm install 安装3.npm run build 安装完成之后，运行npm run build 来编译文件
文章图片
image.png 4.添加至chrome游览器 游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools>shells下的chrome文件夹。（如果没有这个按钮，可能你需要打开开发模式功能）
文章图片
image.png
文章图片
image.png
文章图片
image.png 因为我的chrome浏览器时第一个插件所以在左上角会有显示
文章图片
image.png 【vue开发安装vue-devtools调试工具】我的可以喽，你的呢？加油学vue!
推荐阅读
- 浅析一下Vue3的响应式原理
- vue中输入框事件的使用及数值校验方式
- Vue3|Vue3 reactive响应式赋值页面不渲染的解决
- Vue源码makeMap函数深入分析
- Python（PyCharm开发环境的调试）
- vue语法之render函数和jsx的基本使用
- vue|vue watch中如何获取this.$refs.xxx节点
- 前端开发使用Ant|前端开发使用Ant Design项目评价
- 深信服的AI平台了解一下（看它如何助力AI算法敏捷开发）
- 浅谈我为什么不使用VueUse，而选择造轮子