The release of the latest Vue Devtools 5.0 for both Google Chrome and Firefox was announced recently by one of Vue.js' core team members, Guillaume Chau. The Vue Devtools suite is popularly recognized in the developer community for its help in the inspecting of applications created with Vue.js. Along with new routing as well as performance and settings tabs being added, debugging Vue apps has also gotten a whole lot easier, with the provision for editing a Vuex state from within the Vuex tab. With the addition of these new features, this already powerful is sure to surge in popularity over the coming months.This article is intended to highlight some of these new features and to help developers familiar with Vue Devtools, gain new insights into the debugging process.
The Routing Tab
A brand new addition to the Vue Devtools suite, the Routing tab comes with two different views, namely - the History view and the Routes view. One can swap between these two views by simply clicking on the respective tab heading at the top of the screen. If you happen to make use of a vue-router in your application, then you will find both these views quite helpful in acquiring critical info.While the history panel on the right offers information on the history of the routes that have been used, the route panel to the right shows details on all route changes within your application. By clicking on any one of the entries from the history panel, one can see details about that particular route change along with all accompanying route parameters, in the panel on the right.Similarly, the Routing tab also has two panels - the panel on the left showing a map of all possible routes in the application and the panel on the right offering details on individual entries found in the panel on the left. The right panel, however, offers details that vary from the details available in the History tab. Here, the right panel shows the path of individual entries as well as nested routes and route parameters (if any). Basically, the Routing tab is responsible for keeping a record of the history and routes of the Vue Router of your application.The Vuex TabAlthough the Vuex tab is not necessarily new, it does have some new and exciting features that haven't been seen before. One of these features allows for the updating of the application state directly from the devtools. Staunch users of the Vue Devtools suite have been asking for this feature to be added for quite some time now. In earlier versions, the process for updating the application state was quite tedious, in that one had to either replay all the right mutations in order to get the state the way they wanted it or manually update all default values present in the Vuex module file. With Vue Devtools 5.0, this hassle has been done away with as one can choose to either update or delete a state value by simply clicking on it and watching how the application responds. In addition to the incredibly straightforward and simple updating of default values, there is also the provision for adding new properties on existing objects.The Performance TabThe Performance tab is also a new addition much like the Routing tab. The Performance tab is comprised of two sections namely the 'Frames Per Second' section and the 'Component Render' section. While the Frames Per Second developers a live feed chart depicting information such as the current fps of your application, the Component Render tab offers provides incredibly detailed time-to-run statistics for any components lifecycle methods.New Vue Devtools v5.0 : The live feed chart in the Frames Per Second tab contains the icons "M" - mutation, "E" - event that was fired and "R"- used to indicate a route change, on the top. Although one can expect the fps of an application to dip briefly while route changes are occurring, these icons serve as a reliable indicator of which components to look into, in the case of an unexpected dip or an investigation into performance issues. The left panel of the Component Render tab provides information on the total time taken for each individual component of the application to render, while the right panel offers a breakdown according to the lifecycle method. If you are experiencing annoyingly slow components, it is best to begin investigating such performance issues by looking for the slow components that stand out in this left panel.The new Performance tab in the latest Vue Devtools suite is basically used for a representation of the analysis of the runtime performance of an application, the frame rate and also to find out how long it takes for every component in the app to render. All one has to do to begin inspecting the performance of their Vue app is to activate the record button present at the top left corner of the screen. As per the default setting, a maximum of 20 items is displayed on a page. By hovering over these lines one can view the FPS value as well as the markers 'R' indicating the number of routes and 'M' indicating the number of mutations.The Settings TabLastly, one of the latest and most exciting features is the brand new settings menu that is available in the Vue Devtools suite. One can access the following facilities from this latest settings menu -
- Adjusting the display density into a more compact layout, the Devtools color, etc
- Normalizing of component names and choosing between Pascal cases or original component names (Example - the my-component turns into MyComponent)
- Updating of the theme (one can toggle between conventional/customized themes and the all-new 'Dark' theme option).
ConclusionThe team at Vue along with its community have yet again managed to exceed the expectations of its staunch support community of developers around the world, by offering a set of devtools that offer an incredible development experience right from start to finish. The new additions to the devtools suite combined with the recent release of the vue-cli GUI offer developers the extraordinary capabilities required to create high-performance applications that can be debugged effortlessly using the Vue.js framework. If you have heard about the extensive capabilities of the Vue Devtools suite and are looking to get in on the action, then there is no better time to get acquainted with Vue Devtools 5.0 than now!However, if you happen to be an experienced user of the Vue Devtools suite and aren't quite satisfied with the latest version (Vue Devtools 5.0) then you might want to consider checking out Kendo UI for Vue which also happens to offer an amazing set of UI tools that will help in improving upon the look, feel and performance of your Vue applications tremendously!Ideas2ITAre you looking to build a great product or service? Do you foresee technical challenges? If you answered yes to the above questions, then you must talk to us. We are a world-class custom .NET development company. We take up projects that are in our area of expertise. We know what we are good at and more importantly what we are not. We carefully choose projects where we strongly believe that we can add value. And not just in engineering but also in terms of how well we understand the domain. Book a free consultation with us today. Let’s work together.
.png)
.png)
.webp)
