Vue.js Devtools(Vue调试工具)

Vue.js Devtools 是一款专门为 Vue.js 应用设计的浏览器调试扩展，装上之后会在 Chrome 或 Firefox 的开发者工具里多出一个侧边栏面板，方便开发者直接查看组件状态和数据结构。它针对 Vue 数据驱动的特点做了优化，能自动把 DOM 和对应数据关联起来，改数据就能看到页面同步更新，不用再手动去操作 DOM。对于平时用 Vue 做项目的人来说，这个工具能省下不少排查问题的时间，安装后打开开发者工具就能用。

在浏览器里怎么装

1、 点开浏览器右上角那三条横线的图标，在菜单底部找到并点击【选项】

2、 进入【扩展管理】页面，选择【获取更多扩展】

3、 把已经准备好的插件文件拖进浏览器窗口，勾选【我信任此扩展文件】，再点【验证并安装】就完成了

它主要能帮你做什么

- 在开发者工具的侧边栏窗格里实时检查页面上的 Vue 组件和它们当前的状态

- 直接对代码进行调试，查看数据变化的前后过程

- 利用 Vue 数据驱动的特性，把数据结构解析清楚，DOM 和数据之间自动绑定同步

- 不用手动去改 DOM，数据变了界面跟着变，调试效率自然就上来了

用之前需要什么基础

- 只要你对 HTML、CSS 和 JavaScript 有基本了解，看完使用指南就能直接上手搭建

- 它的生态是渐进式的，可以从轻量库慢慢过渡到功能更全的框架，按需扩展

- 运行体积很小，压缩后 gzip 只有 20KB 左右，虚拟 DOM 速度快，优化工作也比较少

其他实用的小细节

1、 可以查看各个组件或模块最后的更新时间

2、 如果它们带有自己的主页，还能按主页信息做分类整理

3、 除此之外还提供了一些额外的辅助功能，方便日常开发时快速定位问题