Interested in learning Vue.js? Get my free ebook at vuehandbook.com When you’re first experimenting with Vue, if you open the Browser Developer you will find this message: “ “ Tools Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools This is a friendly reminder to install the . What’s that? Any popular has its own devtools extension, which generally adds a new panel to the browser developer tools that is much more specialized than the ones that the browser ships by default. In this case, the panel will let us inspect our Vue application and interact with it. Vue Devtools Extension framework This tool will be an amazing help when building Vue apps. The developer tools can only inspect a Vue application when it’s in development mode. This makes sure no one can use them to interact with your production app (and will make Vue more performant because it does not have to care about the devtools) Let’s install it! There are 3 ways to install the Vue Dev Tools: on Chrome on Firefox as a standalone application Safari, Edge and other browsers are not supported with a custom extension, but using the standalone application you can debug a Vue.js app running in any browser. Install on Chrome Go to this page on the Google Chrome Store: and click . https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Add to Chrome Go through the installation process: The Vue.js devtools icon shows up in the toolbar. If the page does not have a Vue.js instance running, it’s grayed out. If Vue.js is detected, the icon has the Vue logo colors. The icon does nothing except showing us that there a Vue.js instance. To use the devtools, we must open the Developer Tools panel, using “View → Developer → Developer Tools”, or is Cmd-Alt-i Install on Firefox You can find the Firefox dev tools extension in the Mozilla addons store: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/ Click “ ” and the extension will be installed. As with Chrome, a grayed icon shows up in the toolbar Add to Firefox And when you visit a site that has a Vue instance running, it will become green, and when we open the Dev Tools we will see a “ ” panel: Vue Install the standalone app Alternatively you can use the DevTools standalone app. Simply install it using npm install -g @vue/devtools //or yarn global add @vue/devtools and run it by calling vue-devtools This will open the standalone Electron-based application. now, paste the script tag it shows you: <script src="http://localhost:8098"></script> inside the project file, and wait for the app to be reloaded, and it will automatically connect to the app: index.html How to use the Developer Tools As mentioned, the Vue DevTools can be activated by opening the Developer Tools in the browser, and moving to the Vue panel. Another option is to right-click on any element in the page, and choose “Inspect Vue component”: When the Vue DevTools panel is open, we can navigate the components tree. When we choose a component from the list on the left, the right panel shows the props and data it holds: On the top there are 4 buttons: (the current panel), which lists all the component instances running in the current page. Vue can have multiple instances running at the same time, for example it might manage your shopping cart widget and the slideshow, with separate, lightweight apps. Components is where you can inspect the state managed through Vuex. Vuex shows all the events emitted Events reloads the devtools panel Refresh Notice the small text beside a component? It’s a handy way to inspect a component using the Console. Pressing the “esc” key shows up the console in the bottom of the devtools, and you can type to access the Vue component: = $vm0 $vm0 This is very cool to inspect and interact with components without having to assign them to a global variable in the code. Filter components Start typing a component name, and the components tree will filter out the ones that don’t match. Select component in the page Click the button and you can hover any component in the page with the mouse, click it, and it will be opened in the devtools. Format components names You can choose to show components in camelCase or using dashes. Filter inspected data On the right panel you can type any word to filter the properties that don’t match it. Inspect DOM Click the Inspect DOM button to be brought to the DevTools Elements inspector, with the DOM element generated by the component: Open in editor Any user component (not framework-level components) has a button that opens it in your default editor. Very handy. I’m going to learn Vue full-time for 2 months, and to learn it quickly as well, with tutorials and projects, working examples and . I will send you the I create 👨🏼💻 and I will keep you up to date with the course and offer you a when the course is released. Stay in the loop! I’ll create a resource for you screencasts free content big discount Interested in learning Vue.js? Get my free ebook at vuehandbook.com
