Vue-devtools is a browser devtools extension for debugging Vue.js apps

Vue-devtools is a browser devtools extension for debugging Vue.js apps
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

Here in Syndicode, we like to tell you that Vue has a great future. Believe it or not but everyday it’s becoming more popular because of its new extensions. Did you hear about the last one? Vue-devtools is a browser devtools extension for debugging Vue.js apps.

We mentioned this project earlier in our latest JS digest. Before start using it, please keep in mind:

  1. If the page uses a production of Vue.js, devtools inspection is disabled by default so the Vue pane won’t show up.
  2. To make it work for pages opened via file:// protocol, check “Allow access to file URLs” for this extension in Chrome’s extension management panel.

To install the extension:

  • Clone the repo
  • npm install (Or yarn install if you are using yarn)
  • npm run build
  • Open Chrome extension page
  • Check “developer mode”
  • Click “load unpacked extension”, and choose shells/chrome.

That’s it! But remember that if you have any problems, use “Download the Vue Devtools for a better development experience” console message when working locally over file:// protocol: 1.1 – Google Chrome: Right click on vue-devtools icon and click “Manage Extensions” then search for vue-devtools on the extensions list. Check the “Allow access to file URLs” box.

Feel free to check how it works here.

We also collected some interesting facts about Angular vs React vs Vue battle with pros and cons for all of them. Stay tuned!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111