Deep Dive Into The New Vue Devtools v5.0
Earlier this month the Vue devtools version 5.0 beta was released, bringing amazing new features to the already debugging powerful tool. Some of the new features include performance profiling, route tracking, live editing the Vuex store, and a new settings panel. These new components have been anticipated for a while, and after getting a chance to use them for a couple weeks I wanted to share what I found to be the most helpful. Lets go through some of the new features that were added, and look at what new insights they add into the debugging process.
Routing
The Routing tab is brand new to the devtools suite. There are two different views here, “History” and “Routes”, that are able to be swapped by clicking on the “Routing” tab heading. Both of these give helpful information, if you are utilizing vue-router in your application.
The history view has two panels. The left-hand panel shows a history of the routes that have been traveled to. Clicking one of these history entries will show the details of that route change in the panel to the right. These details show which route the user navigated from and to, as well as any accompanying route parameters.
The routing view also has two panels, with the left-hand panel showing a map of all routes in the application. Clicking one of these routes will show the details for it in the right-hand panel. The details here are slightly different than the previous view, and instead will show the path, any children (nested) routes, and any route parameters.
Vuex
The Vuex tab is not new, but it DOES have an amazing new feature; you can now update application state right from the devtools!
This feature has been long awaited. The process for changing state was much more tedious before this update. You either had to replay the right mutations to get the state how you wanted it, or you had to manually update the default values in the Vuex module file. Now you can simply click on any state value and update or delete right from there. Additionally, you can even add new properties on existing objects!
Performance
Like the routing tab, the performance tab is also a new addition. This tab is composed of two sections, “Frames per second” and “Component Render”.
The first tab, “Frames per Second” shows a live feed chart with the current fps of your application. This can be used to find certain actions or components that slow the application down.
In the picture below, you can see that the first red dip in the graph has the icons “M”, “E”, and “R” on top of it. The “M” means a mutation happened here, the “E” means an event was fired, and the “R” indicates that a route change happened. We can expect the fps of an application to dip momentarily on route changes, but if this was an unexpected dip, this would be a good indicator of which components to investigate for performance issues.
This second picture, of the “Component Render” tab, shows detailed time-to-run statistics for a components lifecycle methods. The left pane shows the total render time of the component, while the right pane provides a breakdown by lifecycle method. Any extremely slow components would stand out in this left tab, which again provides a good starting point for investigating performance issues.
Settings
Last but not least, there is a new settings menu available! Currently, this menu includes the following options:
- Change the display density to a more compact layout
- Normalize component names (
my-componentwould turn intoMyComponent) - Update the theme — Toggles the new dark theme option on or off
Conclusion
Once again, the Vue core team and its community have gone above and beyond with providing an amazing developer tooling experience. The Vue devtools have always been an integral part of the developer experience, and this update was a huge push in the right direction. This release of devtools, combined with the recent release of the vue-cli GUI, provide an amazing development experience from creation to finish.
