setup vue dev tools

How to setup vue devtools

Vue devtools is a chrome extension for debugging Vue.js applications.

Installation

Vue devtools extension is only available on Chrome. You can install it from Chrome Web Store.

You can also install it manually check out github page.

Things to remember while using vue devtools

  • Dev tools inspection won’t work if page uses a production/minified build of Vue.js
  • Inspection works with server hosted file, If you want to make it work via file:// protocol then you need to check “Allow access to file URLs” for this extension in Chrome’s extension management panel.
    vue devtools access file

Once you install extension and inspect on page, you’ll see Vue┬átab alongside with other tabs like Netwok, Console etc.

Code Example

When you run above code in browser, you’ll see your data properties and computed properties like below image.

vue devtools tab

So It is very easy to debug vue application using this extension.

Video Tutorial

Leave a Comment