I was looking for tools to develop Vue.js more efficiently and found a great one.
I found a convenient tool for Vue.js development as a Chrome extension.
It makes it easy to check component connections, inspect data, and more. Installation is simple!
HOW TO INSTALL VUE.JS DEVTOOLS
Access the following site in Chrome and install the extension.
Once the extension is installed, when you open a site (page) developed with Vue.js in Chrome, the 'Vue.js Devtools' extension icon will become active.
When active, if you open 'Chrome DevTools,' a 'Vue' tab will be added (as shown below).
IF VUEDEVTOOLS IS NOT WORKING EVEN WHEN OPENING A VUE.JS SITE
Vue.js Devtools may not function in certain situations, such as when developing on a server like AWS EC2.
If you see the message: 'Vue.js is detected on this page.Devtools inspection is not available because it's in production mode or explicitly disabled by the author.'
In the above case, add the following configuration to the file that loads Vue.js, for example, `app.js`.
// app.js
import Vue from 'vue'
// add this line
Vue.config.devtools = true;
new Vue({
el: '#app',
...If it's working correctly, clicking the extension icon will display it as shown in the figure below.
Once you've confirmed it's working properly, reopen Google DevTools, and you should see the 'Vue' tab added.
QUICK INTRODUCTION TO VUE.JS DEVTOOLS FEATURES
Component tab
Clicking on each component allows you to inspect its data, computed properties, and more.
Vuex tab
This tab displays data stored using Vuex, if any.
Events tab
Routing tab
You can check the routing history, easily viewing 'from' and 'to' routes.
Performance
You can measure performance by clicking 'START' and then navigating or displaying pages.
Although it's a basic measurement, you can gauge component render speeds and other metrics.
This has been a brief overview of how to use Vue Devtools.
From my own experience, it significantly improved my efficiency, so I highly recommend Vue.js developers give it a try.
RECOMMENDED VUE.JS BOOKS
While I do read books, I truly feel that hands-on implementation in a real-world setting leads to deeper learning.
Conversely, if you focus solely on implementation, you might miss out on opportunities to consider better coding practices, so I recommend revisiting books as well.
For those with a certain level of knowledge in JavaScript and Vue.js.
📦