Vue.js development tools

Vue has a great panel that can be integrated into the browser developer tools, allowing you to inspect and interact with the application, simplifying the process of debugging and understanding.


When trying to use Vue for the first time, if you open the browser developer tools, you will find the following message:Download the Vue Devtools extension for a better development experience:https://github.com/vuejs/vue-devtools"

Hint to install the Vue devtools

This is a friendly reminder, please installVue Devtools extension. what is that? Any popular framework has its own devtools extension, which usually adds a new panel for browser developer tools, which is more professional than the default tools provided by the browser. In this case, the panel will allow us to inspect and interact with the Vue application.

This tool will provide you with amazing help when building Vue applications. Developer tools can only check Vue applications when in development mode. This ensures that no one can use them to interact with your production application (and can make Vue more performant because it doesn't have to care about devtools)

Let's install it!

There are 3 ways to install Vue Dev Tools:

  • On Chrome
  • On firefox
  • As a standalone application

The custom extension does not support Safari, Edge and other browsers, but using a standalone application, you can debug Vue.js applications running in any browser.

Install on Chrome

Go to this page in the Google Chrome store:https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpdthen clickAdd to Chrome.

Add to chrome

Complete the installation process:

Add extension

The Vue.js devtools icon is displayed in the toolbar. If the page does not have a running Vue.js instance, the page will be grayed out.

Vue DevTools installed

If Vue.js is detected, the icon has the Vue logo color.

Icon colored

The icon has no effect other than showing it to usYesAn instance of Vue.js. To use devtools, we must use "View → Developer → Developer Tools" to open the "Developer Tools" panel, orCmd-Alt-i

DevTools window

Install on Firefox

You can find the Firefox development tool extension in the Mozilla add-on store:https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

Firefox addons store

Click"Add to Firefox", the extension will be installed. Like Chrome, a gray icon will appear in the toolbar

Firefox addon installed

When you visit a website that is running a Vue instance, the website will turn green, and when we open the development tools, we will see a "Vue"Control Panel:

Vue devtools in Firefox

Install standalone apps

Alternatively, you can use the DevTools standalone application.

Install using

npm install -g @vue/devtools

//or

yarn global add @vue/devtools

And run it by calling

vue-devtools

This will open a standalone electronics-based application.

Standalone Vue devtools

Now, paste the script tag shown to you:

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

Inside the projectindex.htmlFile, and then wait for the app to reload, it will automatically connect to the app:

Standalone Vue devtools connected

How to use developer tools

As mentioned earlier, you can activate Vue DevTools by opening the developer tools in your browser and moving to the Vue panel.

Another option is to right-click on any element in the page and select "Check Vue Components":

Inspect vue component

After opening the Vue DevTools panel, we can navigate the component tree. When we select a component from the list on the left, the right panel will display the props and data it owns:

Navigate the components tree

There are 4 buttons at the top:

  • ingredient(Current panel), which lists all component instances running on the current page. Vue can run multiple instances at the same time, for example, it can use a separate lightweight application to manage shopping cart widgets and slides.
  • WicksHere you can check the status managed byWicks.
  • MemorabiliaShow all emitted events
  • RefreshReload the devtools panel

Pay attention to small= $vm0The text next to the component? This is a convenient way to inspect components using the console. Pressing the "esc" key will display the console at the bottom of devtools, you can enter$vm0Access Vue components:

Component Console Shortcut

It's cool to inspect components and interact with them without having to assign them to global variables in the code.

Filter components

Start typing the component name, and the component tree will filter out unmatched components.

Filter components

Select components on the page

Click on

Select component in the page

Button, you can hover any component on the page with your mouse, click it, and it will open in devtools.

Format component name

You can choose to display the components in camelCase or use dashes.

Filter the data for inspection

On the right panel, you can enter any word to filter the attributes that do not match it.

Check the DOM

Click the "Check DOM" button to take it to the DevTools Elements inspector, the DOM element is generated by the component:

Inspect DOM

Open in editor

Any user component (not a frame-level component) has a button that can be opened in the default editor. Very convenient.

Download mine for freeVue manual


More vue tutorials: