作为vue框架官方调试工具，dev-tools提供了对于组件关系和数据状态方便的查看和调试功能，现在它也更新到了适配vue3的版本，项目使用最新的版本进行预览调试开发 1. 打开chrome -> 更多工具 -> 扩展程序 2. 把课程资源下的dev-tools中的shell-chrome拖入即可 注意：先把之前基于vue2的版本的禁止掉 当前的调试工具暂时不支持vuex的调试查看，需要我们额外进行log调试，vuex**内置**了一个logger模块，我们只需要引入并且注册为插件即可 + import { createLogger } from 'vuex' export default createStore({ modules: { user, cart, category }, plugins: [ + createLogger() ] }) 安装好这个log插件之后，我们每次触发action函数和mutation函数都可以在控制台打印出当前本地提交的记录详细信息，包括`名称` `参数` `修改前后的state数据` 调试工具调试的是什么 1. 为什么需要vuex, dev-tools工具呢？ 因为需要时刻知道数据状态是如何变化的 2. dev-tools对于vuex调试的是什么或者说展示的是什么呢？ state和mutation之间关系 ：在哪个时刻调用了哪个mutation函数传递了什么参数把数据 从什么状态改成了什么状态