With the help of Vue 3 Dev Tools, our team has made a qualitative leap in debugging efficiency!

There are dreams and dry goods. search 1612c2d9a22200 [Great Move to the World] attention to the brushing wisdom who is still doing the dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line factory interview complete test sites, materials and my series of articles.

Vue3 has come out, and the official version of Vue3 Devtools is coming out soon. Currently we are using the beta version. Now let's take a look at the new features of Vue3 Devtoolls.

Install

Open the Valley App Store, search for vue devtools , select the beat logo to install, as shown below:

Note that when using Vue3 devtools, turn off Vue2 devtools to avoid confusion.

The first step is completed. If the store cannot be opened, Baidu by yourself. Anyway, you must have more methods than me.

start using

After the installation is complete, we open the console and there is a Vue tab, if the following is shown:

multi-app (multi-app view)

Multi-application view means that we can view multiple applications. For example, I add multiple createApp project as shown below:

import { createApp } from 'vue'
import App from './App.vue'
import App2 from './App2.vue'
import App3 from './App3.vue'

createApp(App).mount('#app')
createApp(App2).mount('#app1')
createApp(App3).mount('#app2')

Open the console to view:

In the browser page with multiple Vue applications, you can quickly exchange between them and have the ability to check Vue applications iframe

inspector tab

We can view the status of each component through the inspector, which is a compass-shaped icon.

Component operation icon

When you select a component, you will see a set of three different icons on the upper right.

The representation of the first eye icon is Scroll to component . When this icon is clicked, the browser will scroll to the location of the component.

The second <> represents Show render code . When you click this icon, you can see the Render function of the current component.

Finally, < means checking the DOM. When you click on it, it will display the component that also represents the position of the Dom.

Multiple components

You may have noticed that there are some small labels next to our components, as shown below:

First of all, you can see that there is a fragment mark, which means multiple components, what is multiple roots, look directly at the content of FragmentComponent.vue

<template>
  <div>Fragment1</div>
  <div>Fragment2</div>
</template>

Multi-root means that there is only one root element like Vue2, not multiple.

Performance indicator

In addition to the logos of multiple components, we can also see some digital logos:

When our component performs poorly because of its slow rendering speed, it will show up, telling us which components are more time-consuming.

As shown in the figure above, when you hover the mouse over it, you can see more information prompts.

Routing indicator

In addition to multiple roots and performance indicators, there is also a routing indicator:

This new feature is very convenient to quickly view the settings of links. But the strange thing is that this feature is not directly added by Vue tools itself, but by Vue Router.

Plug-in

Another very important feature of the new Vue dev-tools is that it can be fully integrated with external plugins. We can easily view the plug-in information used.

In our case project, two libraries have been used: Vuex and Vue Router . Click the Components drop-down, you can see the two brothers:

Click on Others and you will see the custom view of the plug-in. For example, the Vue Router panel shows us a list of currently available routes.

Timeline

Next to the inspector, we can also see this:

This is the Timeline, let's call it timeline .

When you open it for the first time (if you haven't touched your app), you will see a blank central area with colored bullets on the left.

Each color-coded channel will display a timeline of events triggered by the application in real time.

For example, when we click on a route, the following point will appear on the right side of the actual timeline.

This may seem useless at first glance, but these little dots contain a lot of information.

If I click on one of the purple Mouse events, the following information is displayed in the third panel on the far right.

Not only is my click event registered, but my mouseup and mousedown events also contain clicks. We can even get the coordinates x and y

The blue circle represents routing information, click on the blue circle to see the detailed information of the route. As follows:

Component events will also display complete payload information. For example, a simple button click event like this.

<button @click="$emit('customEvent', { some: 'data' })">Click me</button>

If you feel that the panel displays too many options and is a bit dizzy, we can click on the upper right corner to turn off some of the things we don't want:

Open in editor

When selecting one of your custom components in the inspector, if we want its specific definition, we can also open it directly in the editor

If you click this button, the editor will open the file corresponding to the file!

At this point, the introduction of Vue dev-tools is over. I'm Shuawanzhi, what do you want to see, please leave a message and let me avoid it.

Reference: https://www.youtube.com/watch?v=ZBkZ7apIA_Y&feature=emb_imp_woyt

possible bugs that may exist after 1612c2d9a22a30 code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

comminicate

World" on WeChat to read and update as soon as possible (one or two earlier than the blog), this article GitHub 1612c2d9a22a8f https://github.com/qq449245884/xiaozhi has been included, I have sorted out a lot of my documents, welcome to Star and improve it. You can refer to the test site for review for interviews. In addition, pay attention to the . The backstage reply 1612c2d9a22a92 welfare , you can see the welfare, you know.