In this lesson, let's take a look at what the few dev tools have to offer us in terms of debugging performance issues. Now, a little preface before we continue on with this lesson, I do want to say that I don't use these tools very often. time, which is why I've used it throughout the bulk of this course. But...
I do want you to know what's available to you in the Vue DevTools. So let's take a look. Here I have the Vue application open. Doesn't really matter what page I'm on.
Inside of the DevTools though, there's a couple different tabs you want to be aware of in terms of measuring performance. So here we have the Timeline menu and at the bottom is a way to enable measuring performance. Do note that by default it's turned off because turning it on can cause significant performance overhead in large applications. So it's really only recommended to enable it when it's needed.
So to enable it, you just click it there, and then you can start recording. Right now, there are no events to be heard of, but that's because we haven't interacted with the page. So as soon as I click this button here, we get some events recorded in our timeline. Let's stop recording now and take a quick look at what's happened.
This goes from top to bottom. And we can see that the code splitting end component starts with some rendering. This is the start of that process. This is the end of that render process.
3000, blah, blah, blah milliseconds. And the list goes on and on. Here we can see the async component wrapper. because our example component right down here was loaded asynchronously.
So it looks like the async component wrapper component was mounted. This is the start of that process. And then this is the end of that process. Actually, my apologies.
This is the end of an init process. This is the end of the mount process. 8 milliseconds to mount. time to see how long it takes different pieces of the lifecycle of your component to complete.
You can certainly do that. Another menu item to be aware of though is the routes menu item. It also has a timeline and just like with the performance timeline, we can record, navigate between different pages, and then see how long it took to navigate from one page. to another.
Finally, using this graph tab, you can see all of the different files used within your project, what type of files they are, and how they relate to one another. This can help you spot unnecessary connections and good opportunities for code splitting. Do you have any common ways that you utilize the View DevTools for debugging performance issues? We'd love to hear from you in the comments below.