The Vue.js DevTools are an essential tool for Vue.js developers. This powerful panel integrates into the Browser Developer Tools, allowing you to inspect and interact with your Vue.js application. In this guide, we will walk you through the installation process for Chrome, Firefox, and the standalone application, as well as how to use the Developer Tools effectively.

Table of Contents

When you start working with Vue.js, it is recommended to install the Vue Devtools Extension for a better development experience. This extension adds a specialized panel to the browser Developer Tools, allowing you to inspect and interact with your Vue.js application.

Install on Chrome

To install the Vue Devtools Extension for Chrome, follow these steps:

  1. Visit the Vue Devtools page on the Google Chrome Store.
  2. Click on “Add to Chrome” to start the installation process.
  3. Once installed, the Vue.js Devtools icon will appear in the toolbar. If there are no Vue.js instances running on the page, the icon will be grayed out.
  4. To access the DevTools panel, open the “Developer Tools” by going to “View → Developer → Developer Tools” or using the keyboard shortcut Cmd-Alt-i.

Install on Firefox

To install the Vue Devtools Extension for Firefox, follow these steps:

  1. Visit the Vue Devtools page on the Mozilla addons store.
  2. Click on “Add to Firefox” to start the installation process.
  3. After installation, the Vue.js Devtools icon will appear in the toolbar. Similar to Chrome, the icon will be grayed out if no Vue.js instances are detected on the page.
  4. Open the Developer Tools and you will find a new “Vue” panel where you can inspect your Vue.js application.

Install the standalone app

If you prefer to use the standalone Vue DevTools application, follow these steps:

  1. Install the Vue DevTools application globally with either npm install -g @vue/devtools or yarn global add @vue/devtools depending on your package manager.
  2. Run the application by calling vue-devtools in your terminal.
  3. The standalone application will open an Electron-based interface.
  4. Copy the script tag shown in the application, which looks like <script src="http://localhost:8098"></script>.
  5. Paste this script tag inside the index.html file of your project.
  6. Once the page is reloaded, the standalone Vue DevTools application will automatically connect to your Vue.js app.

How to use the Developer Tools

Once the Vue DevTools are installed and activated, you can start using the Developer Tools to inspect and interact with your Vue.js application.

Filter components

In the Vue DevTools panel, you can filter components by typing the component name. This will narrow down the components tree and display only the ones that match your search.

Select component in the page

You can select a component directly from your web page by clicking the “Select component in the page” button. Simply hover over the desired component and click to open it in the DevTools.

Format components names

You have the option to display components in either camelCase or using dashes. Choose the formatting style that suits your preference.

Filter inspected data

To quickly find specific properties, you can type a keyword in the filter input field on the right panel. This will filter out properties that don’t match your keyword.

Inspect DOM

Clicking the “Inspect DOM” button will take you to the DevTools Elements inspector, where you can view and manipulate the generated DOM element for a particular component.

Open in editor

For user-defined components, there is a convenient button that allows you to open the component file in your default editor. This makes it easy to jump to the relevant code for further inspection or modification.

By utilizing the Vue DevTools, you can gain valuable insights into your Vue.js application’s structure, data, and performance. This powerful tool is indispensable for debugging and understanding your Vue.js projects.