Debugging Magic with Vue Devtools

Debugging is a crucial part of the development process, but we know that identifying and fixing issues in complex applications can be a bit tricky. No worries though, we're here to help!

As your Vue.js application grows in size and complexity, errors can become more complex and challenging to diagnose. That's where Vue Devtools comes in - a powerful debugging tool that will help you diagnose your code faster and more effectively.

In this article, we're excited to share with you the power of Vue Devtools, a treasure trove of debugging capabilities that will transform you from a mere Vue.js coder to a fearless bug-busting hero! So let's get started! 😊

Installing Vue DevTools

According to the latest documentation for Vue Devtools. There are 2 techniques to setting up Vue Devtools on your workspace.

• Install as a browser extension

  • On Google Chrome

    

  • On Mozilla Firefox

    

  • On Microsoft Edge

    

• Install as a standalone Electron Application

Installing Vue Devtools as a Standalone app

In case you are using an unsupported browser, or if you have other specific needs (for example your application is in Electron), you can use the standalone application.

Install the package globally:

npm install -g @vue/devtools

Or locally as project dependency:

npm install --save-dev @vue/devtools

Once you installed the package globally, run:

vue-devtools

Then add this code to the `` section of your application HTML file:

<script src="<http://localhost:8098>"></script>

Or if you want to debug your device remotely:

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script><script src="http://<your-local-ip>:8098"></script>

Note: Don't forget to remove it before deploying to production!

usually looks like this: 192.168.x.x.

Then start your development server like you are used to, without killing the vue-devtools command (for example, open a new terminal). So you will be running both applications simultaneously.

yarn dev
#or
yarn serve

Starting Devtools in our Browser

For our tutorial we will be running our Vue Devtools in our browser.. Let’s explore how

Step 1 - in your Vue.js application local setup. Right click and navigate to the inspect option. You can also use the F12 key as a shortcut.

Step 2 - Select the more option to expand the tabs and select the Vue option.

Awesome progress 🚀 now we have our Vue Devtools setup and running alongside our project. Now we can begin exploring its usage.

Debugging Components

Vue Devtools provides a variety of useful tools to help you understand your components. One of the most important features is the Component Tree view.

To access it, simply click on the "Components" tab.

Here you can see a hierarchical list of all the Vue.js components that are currently active in your application or page. Each component is represented by a tree node that can be expanded or collapsed to reveal its children. This will help you determine whether or not a component is being rendered.

For instance, the App component is the root component and has a child component called HelloWorld. If you expand the HelloWorld node, you can see additional details such as its props, data, and computed properties.

Furthermore, the Component Tree view allows you to interact with your components in real-time. For example, you can click on a component node to select it, and then view and modify its properties and data in the DevTools panel.

Debugging your states, events, props and more

Our Vue.js applications is usually made up of our components and states and how we share our states between components. We usually use props or events to assist in communicating between our components. Bugs may creep in sometimes or things may not work as we expect them to.

That’s normal, but we can go through these stages faster and easier with Vue Devtools.

Firstly in the component tree we can monitor our states. Any changes to our data is reflected in Component properties in Vue Devtools and with that we can track and make real-time changes to our components data.

Secondly we have the timeline inspector. The timeline inspector allows you to travel through previous versions of your states or events.

Imagine being able to rewind to a particular instance to get the state of that property at that instance. Awesome.

With the timeline inspector you can diagnose if your component events are firing as expected.

Monitor routes

When creating a Vue.js Single Page Application (SPA), you can use Vue DevTools to easily track and debug your routes and navigation flow. The Routing tab logs route data and history during transitions and also displays all the application routes and their options.

Debugging your Pinia Stores

As our applications grow bigger and more complex, it can be tough to manage data within the components. But don't worry, we've got a solution! We can introduce a central store as a central point where all components can access our data.

You may have heard or used some state management tools like Vuex and Pinia. Pinia seems to have gained more popularity lately, so in this document, we'll take a look at how Vue Devtools can help provide a better debugging experience for Pinia.

The best part is Pinia hooks into Vue devtools to give you an enhanced development experience in both Vue 2 and Vue 3.

Vue Devtools provides a dedicated tab for your Pinia stores. Within this tab, you can conveniently view and monitor your stores, allowing for easy tracking of their data and state. This feature enhances the development experience, making it simpler to manage and troubleshoot your stores within your Vue.js application.

Let’s take an example of using Vue Devtools with a Vue.js application with Pinia.

We created a todo application with a simple create and delete feature. With Vue devtools we are able to track any mutations to our states and make updates to our store right inside our browser.

The time travel feature also works with your Pinia stores so you are able to preview previous versions of your store right in the timeline view.

Conclusion

I hope you enjoyed reading this article on Vue Devtools as it offers valuable insights into the capabilities of this powerful tool for Vue.js developers.

As a Vue.js developer, having Vue Devtools is essential for effective debugging. However, it's worth mentioning that the JavaScript ecosystem offers various other debugging tools. Experienced developers often suggest using a combination of Vue.js Devtools with other debugging tools to enhance the overall debugging process and achieve better results.

In future articles, I'll share more knowledge and experiences regarding newer Vue.js debugging tools like Nuxt Devtools and Vite plugin Vue Devtools. These tools can further streamline your debugging workflow and provide additional functionalities for your Vue.js applications. Stay tuned for more informative content!