# This sound familiar?

Canonical: https://brew.new/templates/vueschool/this-sound-familiar

Brand: vueschool.io
Category: newsletter

![Preview of This sound familiar?](https://cdn.brew.new/email-preview-dd2425de1989d2c5-tracking_r57gctgw02d97h5sk83zng9thx8dv62n-1789016517423.png)

## Email content

Vue School website

Hi John,

Most Vue developers I know had a hard time getting their head around debugging Vue applications.

Does this sound familiar? Heck, that can be difficult!

For a long time, I thought that using the browser console and debugger is the way to go.

Turns out, that’s not the case at all. And in this email, I'm going to show you two steps you can immediately take to start debugging your Vue applications with ease from now on (and a bonus step for advanced Vuers).

Step 1: Install Vue DevTools

Vue DevTools is a browser extension that adds a new panel to your browser’s developer tools. This panel specializes in developing Vue applications and components.

One of the benefits Vue DevTools provides is the live overview of the state of your application, including the active components, events, and so on. It also allows you to live-edit data properties and see the changes reflected immediately in the browser.

Installing Vue DevTools to your browser adds a new panel to your browser’s developer tools.

Vue DevTools is the most complete in-browser framework tool I’ve seen! It’s also open source and free to use.

Click one of these links to install Vue devtools on Chrome or on Firefox from the corresponding extension store.

Step 2: Use Vue DevTools while developing

Next time you are going to work on a Vue application, open Vue DevTools and keep it open.

Turn on your images to view how to work with Vue DevTools

To find Vue DevTools, open your browser’s DevTools and navigate to the Vue panel. In this panel, you will notice a few tabs related to Timeline, Components, and Routing. Plus, even more useful info is nested under each, like Application State, Events, Performance, and so on.

The most essential feature is the ability to edit the component’s data in real-time. To do that:

Open the components tab

Find and select your component in the left column

Edit the component’s data, using the inputs on the right side

Data updates in the component and in the Browser

Once you familiarize yourself with this tab, go through the rest and see which features are the most helpful for you and your project. The features I have noticed Vue developers use the most are the Components, State Management, and Events.

Bonus Step: Open the component right in your code editor

It’s quite common when you notice a bug in a component that you want to go to your code editor, open the component file, and fix it, right? Vue DevTools allows you to open components in your favorite code editor directly from the browser! If you are interested in using this feature, follow these short instructions.

Turn on your images to view how to work with Vue DevTools

Hope you have enjoyed the tips so far. Don’t forget to check out the tutorials section of the website. We put up regular tips and tricks there, too.

I’m also going to send you one of my other favorite quick wins shortly – so keep an eye out!

Kind regards,

Alex Kyriakidis

vueschool.io

Facebook

X

GitHub

BlueSky

LinkedIn

YouTube

Instagram

TikTok

Vue School is proudly part of BitterBrains – Making Developers’ Lives Easier

Become a BitterBrains Community Supporter here.

Courses | Vue.js Master Class | Workshops | Tutorials | Plans

🔕 Not interested? Mute Updates and Announcements here.

To make sure you keep

getting these emails, please add team@vueschool.io to your address book or whitelist us. You are currently subscribed to the email address thomas+vueschool@brew.marketing

Manage email preferences

2093 Philadelphia Pike #9442, Claymont, Delaware 19703, United States

[Open and remix this design](https://brew.new/templates/vueschool/this-sound-familiar)

[Browse email designs](https://brew.new/browse/templates)