introduce

When choosing a JavaScript framework for developing Web applications, we can choose from a number of lists. Each framework has its own unique strengths and weaknesses. For Vue, one of its strengths is the power of DevTools. For details, see vue-devTools.

In this article, we introduce Vue DevTools and see how it can be used to manipulate Vue applications at run time for a better debugging experience.


Preparation stage

You will need to install the following tools on your computer (ignore them if you have them)

  • Npm (3+)
  • Node (6+)
  • Vue CLI

The installation

There are basically three ways to install Vue DevTools:

  • As a Chrome extension,
  • As a Firefox extension,
  • As a standalone application

From the list above, we can see DevTools
only
As a custom extension for Chrome and Firefox browsers

provide
As described in the official repository.
Users of other browsers will have to install stand-alone applications locally on their computers.

How to install Vue DevTools for Chrome

  • On your Chrome browserTo access thePage:

  • Click on the
    Added to Chrome
    Button.

  • When a pop-up window is displayed,
    Click on the
    Add extensions
    .

This adds Vue DevTools as a Chrome extension and displays a confirmation notification:

                     

How do I install Vue DevTools for Firefox

  • In FirefoxVisit this page:




  • Click on the
    Added to the Firefox
    button

  • When a pop-up window is displayed,
    Click on the
    add
    .

This will add Vue DevTools as a Firefox extension.

                       

How do I install Vue DevTools as a stand-alone (Electron) application

Run the following command to install Vue Devtools globally (using Npm) as a standalone application: 

npm install -g @vue/devtoolsCopy the code

Or locally as a project dependency: 

npm install --save-dev @vue/devtoolsCopy the code

We can also use it
Yarn
Install it globally
: 

yarn global add @vue/devtoolsCopy the code

Once installed, we can start the application with the following command: 

VUE-devtoolsCopy the code



This will open the standalone application, and you need to add this link to the application’s file:
index.html  

<script src="http://localhost:8098"></script>Copy the code

Then wait for the standalone application to reload – it will automatically connect to your Vue application.

5 ways to use Vue DevTools

Vue DevTools makes it easy to debug Vue applications at run time, and we’ll look at five ways to debug using the DevTools plug-in.

Edit component data

When building components using Vue, you may need to try out various component values or process component data in real time.
Update the data item in your IDE and then go to the browser to see the results no longer.

Vue DevTools allows you to edit component data in real time:

  • Open DevTools in your browser and navigate to
    Vue
    TAB

  • Select your component in the left column of the label

  • Edit the component’s data on the right column of the TAB



Tip: You can start Chrome DevTools by: -Ctrl + SHIFT + I (CMD for Mac)

Item data is not editable by default, but we can make it editable by enabling it in the Settings TAB.



With this feature, you can edit all data types, toggle booleans, and manipulate array values.
You can also process data from remote apis.
Once the data is loaded into the Vue application, it is fully accessible for real-time editing.

Load the component in the DOM

Vue DevTools allows you to load HTML for custom components in the DOM.
This is useful for debugging your application’s UI.
To load component data into the DOM, navigate to
Components TAB
“
Inspect the DOM”
Options:



”
Inspect the DOM”
options
beside
Is”
In the editor
Open option, which opens the selected component in the default editor.

Track custom events

You can
this.$emit(‘customEvent’) 
Using DevTools
Tracking custom events (using emitted events
).
This allows you to see if the event is fired correctly and to examine the payload carried by the event.

To track custom events, do the following:

  • Navigate to the Events TAB

  • Open the
    Recording (if not already opened)

  • Trigger events and observe their recording:



Monitor route history and data

When building SPA applications using Vue, you may need to debug the route in real time or track the overall navigation flow.
The Vue DevTools”
routing“
TAB in your application to convert from a route to
another
When the routing
Record your routing data and history.

The routing TAB has two options:

  • The historical record
    Displays navigation history of the route and its data

  • route
    Displays all routes and their options in the application

To use”
routing“TAB
, perform the following operations:

  • Navigate to the”
    Routing”
    TAB

  • choose
    History (default)
    or
    route

  • Browse the route and observe its record:



Debug Vuex behavior and time across previous states

Vue Devtools has one
Vuex
TAB that records your status each time Vuex issues a mutation.
This simplifies the process of debugging the state if it starts to behave in unpredictable ways.
There is also a feature that lets you view early versions of Vuex status in real time.

Here is the time travel debugging feature in action:



conclusion

With modern tools that simplify the development process, developers can benefit from these tools to achieve faster, more efficient workflows.


In this article, we explored five ways to use Vue DevTools for fast, efficient debugging.
Hopefully, you can take advantage of these features and have a better debugging experience in your Vue applications.