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:
- If the page uses a production of Vue.js, devtools inspection is disabled by default so the Vue pane won’t show up.
- 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
yarn installif you are using yarn)
npm run build
- Open Chrome extension page
- Check “developer mode”
- Click “load unpacked extension”, and choose
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!