Vue DevTools 速通-掌握开发调试器

Vue DevTools 是一款专为 Vue.js 开发的浏览器扩展工具，用于调试和优化 Vue 应用。以下是安装及使用指南：

一、安装 Vue DevTools

Chrome（推荐）：通过 Chrome 网上应用店安装。

Firefox：通过 Firefox 附加组件市场安装。

Edge：与 Chrome 兼容，可直接安装 Chrome 版本。

点击 "添加至 Chrome" → 确认安装。

vue文件或项目中打开 Chrome 开发者工具（F12 或右键选择"检查"）；

切换到 "Vue" 标签页（若未看到，刷新页面或检查是否为 Vue 应用）。

查看应用的组件层级结构，可快速定位到DOM；还可一键在vscode中打开选中的组件源代码，不用ctrl + f 查找你要调试的组件。

如图找到你想查看的组件------点击右上角类似【分享】图标------跳转到vscode该组件源代码

点击组件可查看其数据（data）、属性（props）、计算属性（computed）等。

手动修改数据实时预览效果（仅开发环境）。

注：如果使用 Vuex 进行状态管理，Vue DevTools 的 Vuex 检查器是一个强大的调试工具。

允许查看 Vuex 的 state、mutations、actions。

允许提交 mutation 或分发 action 调试状态变化。

Vue DevTools 的路由（Router）面板是与 vue-router 集成的功能模块，允许开发者查看路由列表、详细信息、导航历史记录，并支持手动导航测试。

显示所有路由配置 ：在 Router 面板中，下拉菜单会列出项目中定义的所有路由路径（如 /index、/home 等），包括对应的组件名称（如 indexPage、homePage）。

查看路由参数 ：对于动态路由（如 /user/:id），可实时查看当前匹配的参数值（如 id: 123）。

记录路由跳转轨迹：面板会记录用户或代码触发的所有路由变更，包括从哪个路径跳转到哪个路径，便于复现导航流程。

时间戳辅助调试：每条记录附带时间戳，帮助分析路由变更的时序关系。

输入路径直接跳转 ：在面板底部输入目标路径（如 /home），可手动触发路由跳转，测试路由配置是否正确。

验证权限控制 ：结合路由守卫（如 beforeEach），测试不同权限下的导航行为。

（4）事件追踪（Events）

监控组件触发的事件（如 @click）。

查看事件参数和触发链。

在 Vuex 面板中，可回退到之前的状态快照（需启用时间旅行功能）。

通过 devtools 选项注册自定义组件，暴露内部数据供调试：

复制代码

export default {
  devtools: {
    exposed: ['customData'] // 暴露自定义数据
  },
  data() {
    return { customData: 'Hello' }
  }
}

环境检测
Vue DevTools 仅在开发环境（process.env.NODE_ENV === 'development'）生效，生产环境自动隐藏。

若文章对你有帮助，点赞❤️、收藏⭐加关注➕吧！