0% found this document useful (0 votes)

16 views

Debugging Magic With Vue Devtools - Vue School Articles

This document discusses debugging tools for Vue.js applications, focusing on Vue Devtools. It explains how to install and use Vue Devtools to debug components, states, events, props, routes, and Pinia stores. Vue Devtools allows monitoring components, modifying states in real-time, and time traveling through previous states. It provides valuable insights for effective debugging of Vue.js applications.

Uploaded by

castrow666

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

16 views

Debugging Magic With Vue Devtools - Vue School Articles

Uploaded by

castrow666

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 13

Sign Up for Early Bird

Home / Blog / Debugging Magic with Vue Devtools

Debugging Magic with Vue Devtools ×

Charles Allotey
August 1st 2023

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. Sign Up for Early Bird
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
Sign Up for Early Bird

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
Sign Upisfor
needs (for example your application in Early Bird you can use the standalone
Electron),
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:

Or if you want to debug your device remotely:

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

usually looks like this: 192.168.x.x .
Sign Up for Early Bird
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
SignorUppage.
currently active in your application for EarlyEach
Bird 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
Signcomponents.
how we share our states between Up for Early BirdWe 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.
Sign Up for Early Bird

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
Sign Up for Early Bird
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.
Sign Up for Early Bird
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!

Start learning Vue.js for free

Your Email START LEARNING
Sign Up for Early Bird

Charles Allotey
Charles is a Frontend Developer at Vueschool. Has a passion for building great experiences
and products using Vue.js and Nuxt.

Latest Vue School Articles

Crafting a Custom Component Library with Vue and Daisy UI

Do you want to build your own component library with Vue.js? We’ll show you how to get
started in our course: Crafting a Custom Component Library with Vue and Daisy UI.

Daniel Kelly
Sign Up for Early Bird

What Makes a Good (Vue) Component Library? A Checklist

Considering building a Vue Component library? Checkout this checklist of concerns you
should make sure to remember!

Daniel Kelly

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We
offer the knowledge of our industry leaders through awesome video courses for a
ridiculously low price.

More than 120.000 users have already joined us. You are welcome too!
Products Business Services
Courses Sign Up forRemote
Early Bird
Workshops