Vue-03 （调试工具Vue Devtools ）

用于调试的 Vue Devtools 简介

Vue Devtools 是调试 Vue.js 应用程序的重要浏览器扩展。它允许开发人员检查组件层次结构、检查数据、跟踪事件和分析性能，从而提供对 Vue 应用程序内部运作的宝贵见解。本课将全面介绍 Vue Devtools，涵盖其安装、功能和高效调试的实际用法。

安装和设置

Vue Devtools 可作为 Chrome、Firefox 和 Edge 的浏览器扩展使用。

Chrome

1. 打开 Chrome Web Store。
2. 搜索 “Vue.js devtools”。
3. 点击“添加到 Chrome”。
4. 单击“添加扩展”确认安装。

Firefox

1. 打开 Firefox 浏览器附加组件。
2. 搜索 “Vue.js devtools”。
3. 点击 “Add to Firefox”。
4. 单击“添加”确认安装。

Edge

1. 打开 Microsoft Edge Addons 商店。
2. 搜索 “Vue.js devtools”。
3. 点击“获取”。
4. 单击“添加扩展”确认安装。

安装后，你可能需要在扩展设置中允许扩展访问文件 URL，以便它与本地服务的 Vue 应用程序一起使用。

Vue Devtools 的核心功能

Vue Devtools 提供了一系列功能，可显著增强调试体验。

组件检查器

组件检查器是理解 Vue 应用程序结构的主要工具。它显示应用程序中所有 Vue 组件的分层表示。

• Component Tree: 左侧面板显示组件树，允许您浏览组件层次结构。
• Component Details: 在树中选择组件时，右侧面板会显示有关该组件的详细信息，包括：
  • Props: 传递给组件的 props。
  • Data: 组件的数据属性。
  • Computed Properties: 组件中定义的计算属性。
  • Vuex State: 如果组件使用 Vuex，则会显示相关的状态属性。
  • Events: 组件发出的事件。

Vuex 检查器

如果您的应用程序使用 Vuex 进行状态管理，则 Vuex 检查器提供了用于跟踪状态更改和调试更改和作的工具。

• State: 显示 Vuex store 的当前状态。
• Mutations: 记录已提交的所有更改及其有效负载。您可以穿越更改的时间旅行，将状态恢复到之前的某个时间点。
• Actions: 记录已调度的所有作及其有效负载。

路由器检查器

Router 检查器允许你检查 Vue Router 驱动的应用程序的当前路由和历史记录。

• Current Route: 显示当前路由的路径、名称和参数。
• Navigation History: 显示访问过的路由的历史记录，以便您了解导航流程。

事件检查器

事件检查器允许你监控 Vue 组件发出的事件。

• Event Tracking: 记录组件发出的所有自定义事件及其有效负载。
• Filtering: 允许您按组件或事件名称筛选事件。

性能

性能选项卡允许你分析 Vue 应用程序并识别性能瓶颈。

• Timeline: 记录 Vue 组件生命周期 hook、事件和其他作的执行时间。
• Flame Chart: 将性能数据可视化为火焰图，以便轻松识别性能缓慢的组件或作。

实际示例和演示

让我们探索一些如何使用 Vue Devtools 进行调试的实际示例。

检查组件数据

假设你有一个简单的 Vue 组件，它显示一个项目列表：

<template>
  <div>
    <h1>My Items</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item A' },
        { id: 2, name: 'Item B' },
        { id: 3, name: 'Item C' }
      ]
    };
  }
};
</script>

要使用 Vue Devtools 检查 items 数据属性：

1. 在浏览器中打开 Vue Devtools。
2. 选择 “Components” 选项卡。
3. 在 component tree 中找到您的组件。
4. 在组件详细信息面板中，您将看到 items 数据属性及其当前值。

你可以直接在 Vue Devtools 中修改 items 数组来测试不同的场景并查看组件如何更新。

调试 Vuex State

如果你使用的是 Vuex，你可以使用 Vue Devtools 来检查你的 store 的状态并跟踪 mutation。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
});

要调试 Vuex store：

1. 打开 Vue Devtools。
2. 选择 “Vuex” 选项卡。
3. 您将看到 store 的当前状态，包括 count 属性。
4. 调度 increment操作。
5. 在 “Mutations” 部分，您将看到increment更改的日志及其有效负载（在本例中为空）。
6. 状态将更新以反映更改。

您可以使用时间旅行功能，通过单击日志中的更改，将状态恢复到之前的时间点。

监控事件

Vue Devtools 可用于监控组件发出的事件。

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', { message: 'Hello from the component!' });
    }
  }
};
</script>

要监控 my-event 事件：

1. 打开 Vue Devtools。
2. 选择 “Events” 选项卡。
3. 单击组件中的 按钮。
4. 在 Events （事件） 选项卡中，您将看到 my-event 事件的日志及其负载。

性能分析

要分析 Vue 应用程序的性能：

1. 打开 Vue Devtools。
2. 选择 “Performance” 选项卡。
3. 点击 “Record” 按钮。
4. 与您的应用程序交互以触发要分析的代码。
5. 点击 “Stop” 按钮。
6. Vue Devtools 会显示一个时间线和火焰图，显示各种作的执行时间。