配置 DevTools

火狐浏览器

火狐浏览器比较简单，启动浏览器，找到如下图所示 浏览器右上角 图标

搜索插件进行安装即可

谷歌浏览器

如果可以访问 谷歌应用商店 ，那么操作起来跟火狐浏览器是一样的。

因此，我们这里补充的是离线安装 vue-tool 方法。

从 GitHub 仓库（如vuejs/devtools）下载最新版本源码 或者从这里下载 下载 devtools 插件

启动浏览器

启用 开发者模式 加载插件

或直接将解压后的 crx 拖入浏览器如下所示

添加后可以将 vue插件 钉在右上角

使用

启动 vue项目 按 F12 进入控制台，切换至 vue 标签

查看组件树

1. 打开你要调试的 Vue.js 应用。
2. 按 F12 或者右键选择“检查”，打开 Chrome 开发者工具。
3. 你会看到一个新的“Vue”标签，点击它。
4. 这里会展示出页面上所有的 Vue.js 组件。点击任意一个组件，可以查看它的状态和属性。

实时监控事件

1. 在“Vue”标签中，切换到“Events”选项卡。
2. 你可以看到应用中各个组件之间的事件传递情况。
3. 通过查看事件的流转，可以帮助你调试事件处理逻辑。

查看和修改 Vuex 状态

1. 在“Vue”标签中，切换到“Vuex”选项卡。
2. 这里会展示 Vuex 的状态树。
3. 你可以查看和修改 Vuex 的状态，还可以进行时间旅行调试。

路由调试

1. 在“Vue”标签中，切换到“Router”选项卡。
2. 你可以查看当前路由的信息以及路由的历史记录。
3. 通过查看路由信息，可以帮助你调试和管理路由。