Menu
I have the following code with a simple working Vue.js application. But the vue.js devtools is not responding. It was working well a few days ago, now it's not working anymore what could possibly be going wrong? when I go to https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd, it says it is already added.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <title>Document</title> </head> <body> <div class="container"> <div id="application"> <input type="text" v-model="message"> <p>The value of the input is: {{ message }}</p> </div> </div> <script> let data = { message: 'Hello World' } new Vue({ el: '#application', data: data }) </script> </body> </html> 
200
The Vue devtools don't show upCheck if you have the extension installed. If you are on a live website, there is a good chance it's using a production build of Vue. Set the __VUE_PROD_DEVTOOLS__ environment variable for Vue 3 when using a bundler like Webpack (more info).
With your Vuex properties added, open your browser and open the Devtools. In the Components dropdown at the top of the pane, you will now find a Vuex option. Click to switch to the Vuex view.
The Vue Devtools is an invaluable browser extension to Chrome and Firefox that will speed up your development and bug hunting. Vue Devtools 6 supports Vue 3 and as of right now it's in beta and available for Chrome and Firefox.
I tried all of the ways presented in answers here, but none of them worked for me (neither for chrome nor for firefox).
Finally I found an answer: If you still have this problem, you can try to uninstall the current version of Vue extension and install beta version: https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension
Remember to restart your browser afterwards.
81
One alternative is to set up a local web server, as the OP already stated.
The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.
Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.
Sources:
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
http://codersdeck.com/vue-js-2-setting-vue-devtools/
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
