Vue.js Devtools（含旧版）最新版

功能

• 组件树查看：展示当前页面的组件树，包括组件的嵌套关系、props 和 events。
• 组件状态查看：查看每个组件的响应式数据，包括其值和变化历史。
• 事件追踪：记录组件之间的交互，包括事件派发和监听。
• 性能分析：分析组件渲染性能，找出性能瓶颈。
• 时间旅行调试：在组件状态变化的历史记录中前进和后退，方便调试复杂问题。
• Vuex 状态管理调试：查看和管理 Vuex store 的状态，包括 state、getters、mutations 和 actions。
• 路由调试：查看路由的历史记录、当前路由的参数和查询。
• WebSocket 调试：查看和管理 WebSocket 连接，查看发送和接收的消息。

安装

• Chrome 浏览器：
  1. 打开 Chrome 浏览器，访问 Chrome 网上应用店。
  2. 在搜索框中输入“Vue.js Devtools”。
  3. 找到对应的扩展，点击“添加至 Chrome”按钮。
  4. 安装完成后，浏览器工具栏上会出现 Vue.js Devtools 的图标。
• Firefox 浏览器：
  1. 打开 Firefox 浏览器，访问 Firefox 附加组件网站。
  2. 在搜索框中输入“Vue.js Devtools”。
  3. 找到对应的扩展，点击“添加至 Firefox”按钮。
  4. 安装完成后，浏览器工具栏上会出现 Vue.js Devtools 的图标。

使用方法

• 打开 Vue.js Devtools：
  • 在 Chrome 浏览器中，右键点击页面元素，选择“检查”或按 Ctrl + Shift + I（Windows）或 Cmd + Option + I（Mac），然后在开发者工具中切换到 Vue 选项卡。
  • 在 Firefox 浏览器中，右键点击页面元素，选择“检查元素”或按 Ctrl + Shift + K（Windows）或 Cmd + Option + K（Mac），然后在开发者工具中切换到 Vue 选项卡。
• 查看组件树：
  • 在 Vue.js Devtools 的“组件”面板中，可以查看当前 Vue 实例中所有的组件及其嵌套结构。展开组件，查看其当前的 props 和状态（data）。
  • 选择某个组件，实时查看其属性，便于调试。修改组件的状态，立即看到界面上的变化。
• 调试组件状态：
  • 在“组件”面板中，展开 data、computed 等部分，查看当前值。直接修改值，Vue.js Devtools 会实时反映在页面上。
• 查看事件和监听器：
  • 在“事件”选项卡中查看组件触发的事件。查看事件处理函数和相关参数。
• 性能分析：
  • 点击“性能”选项卡，开始记录。进行页面操作，然后停止记录。查看组件渲染的时间和频率。
• Vuex 状态管理调试：
  • 在“Vuex”面板中查看和管理 Vuex store 的状态。查看历史状态和时间旅行调试。
• 路由调试：
  • 在“路由”面板中查看路由的历史记录、当前路由的参数和查询。
• WebSocket 调试：
  • 在“WebSocket”面板中查看和管理 WebSocket 连接。查看发送和接收的消息。

高级技巧

• 使用自定义侦听器：在 Vue.js Devtools 的“自定义侦听器”选项卡中添加新的侦听器，输入要侦听的表达式，设置触发条件。
• 快捷键：使用快捷键可以更快地进行调试。例如，Ctrl + Shift + V（Windows）或 Cmd + Shift + V（Mac）：打开 Vue.js Devtools；Ctrl + Enter（Windows）或 Cmd + Enter（Mac）：在组件树上查找。