Getting familiar with the Vue Devtools
Even the most senior developers rely on debugging tools to help them develop high-quality and bug-free code (no code is really bug-free, but that is the aim when developing). The Vue Devtools goal is to provide quick insight into different parts of the Vue.js framework that can be used to help us complete our daily tasks.
It is possible to debug our application by placing alert
and console.log
or another preferred method within our code, but what if you could find all the information you need directly in the browser, using a very nice and clean UI? That is the Vue Devtools for you.
In this section, we are going to learn how to enable the Vue Devtools on our browser and learn the different sections of this extension.
In the course of this chapter, we are going to use the Vue Devtools Chrome extension, but the UI and features should match other available sources, such as Firefox and the Electron app.
To get started, we need to install...