如何使用Devtools调试Vue程序？

Right now, there is no easy way to debugour app. All we can do is add console.log statements to our code to look at thevalues. With Vue.js Devtools, we can have more visibility in our app.

现在，还没有一种简单的方法来调试我们的应用程序。我们能做的就是在代码中添加console.log 语句来查看值。有了 Vue.js Devtools，我们可以对应用程序有更多的了解。

Vue.js Devtools is a Chrome or Firefoxextension that we can use to debug our Vue.js applications. It can be used onprojects that are created with Vite or created from scratch by including thescript tag for Vue 3. We can install the extension by searching for the Vue.jsDevtools extension in the respective browser’s app store.

Vue.js Devtools 是一个Chrome 浏览器或火狐浏览器扩展，我们可以用它来调试 Vue.js 应用程序。它既可用于使用 Vite 创建的项目，也可通过包含 Vue 3 的脚本标签从头开始创建。我们可以在相应浏览器的应用商店中搜索 Vue.js Devtools 扩展来安装该扩展。

Once we’ve installed it, we should see theVue tab in the browser’s development console. With it, we can inspect thecomponent tree of the application. For example, let’ say we have the followingcode:

安装完成后，我们就可以在浏览器的开发控制台中看到 Vue 标签。通过它，我们可以查看应用程序的组件树。例如，假设我们有以下代码：

演示devtools // 创建Vue实例 const App = { data(){ return{} } } const app = Vue.createApp(App)

// 注册组件 app.component("foo",{ data(){ return { message:"I am foo." } }, name:"foo", template: `{{message}}` })

// 挂载 app.mount("#app")

Here, since we have the name property ofthe foo component set to “foo”, we will see that listed in the component tree.Also, the foo component has the message reactive property, so we will also seethe message property displayed with its value. Above the component tree, thereis a search box that lets us find the reactive property with the given name. Wecan also search for components with the Find components... input box.

在这里，由于我们将 foo 组件的name 属性设置为 "foo"，因此我们将看到组件树中列出的名称。此外，foo 组件还具有消息反应属性，因此我们还将看到消息属性及其值的显示。在组件树的上方有一个搜索框，我们可以通过给定的名称找到反应属性。我们还可以使用查找组件...输入框搜索组件。

The following screenshot shows us thevalues of Reactive properties in our Vue 3 app, within the Vue Devtoolsextension:

下面的截图显示了 Vue Devtools 扩展中 Vue 3 应用程序中的反应属性值：

There also the Timeline menu item, which wecan use to inspect the events that are emitted. For example, let’s say we havethe following code:

此外，还有时间轴菜单项，我们可以用它来检查发出的事件。例如，假设我们有以下代码：

Devtools中的时间轴菜单 count : {{count}} increment const App = { data() { return { count: 0 } } } Vue.createApp(App).mount("#app")

When we click on the Increment button, wewill see the mouse events logged in the Timelines section. The time the eventis triggered will also be logged.

单击 "increment "按钮后，我们会在 "时间线 "部分看到鼠标事件记录。事件触发的时间也会被记录下来。

In the Global Setting section, we can seethe Nomalize Component Names setting, which lets us change how the componentnames are displayed. We can dispaly the original name in Pascal case or Kebabcase. The Theme option lets us change the theme color of the Vue tab.

在 "全局设置"（Global Setting）部分，我们可以看到 "组件名称标准化"（Nomalize Component Names）设置，通过该设置，我们可以更改组件名称的显示方式。我们可以用 Pascal 或 Kebab 区分原始名称。通过主题选项，我们可以更改 Vue 标签的主题颜色。