I've installed the beta of Vue.js devtools in both Chrome and Microsoft Edge. When I load a vue web page that I'm running locally it shows
Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I've also tried setting
app.config.devTools = true;
in main.js but it has no effect.
This is for Vue.js 3.
Is there a Vue devtools browser extension that works with Vue 3?
Vue tools finally started working again after I did a yarn install on the project.
Related
When I run my Vue app, the Vue devtools extension detects Vue.js, but complains:
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I'm serving the app locally using yarn serve, which runs vue-cli-service serve.
vue: 3.0.0
vue devtools: 6.0.12
#vue/vue-cli: 5.0.1
#vue/vue-cli-service: 4.5.14
node: 16.14.0
yarn: 1.22.4
Chrome: 98.0.4758.102
Vue devtools DOES work if:
Another dev runs the app in Chrome from a clean local repo (same versions of everything above)
I create and run a new Vue app (vue create) in Chrome
Vue devtools DOES NOT work (same error message) if:
I run my app from a new local repo
I clear all browsing data from Chrome
I add vue.config.performance = true to my main.ts file
I add --mode=development to my vue-cli-service build command
I use Edge (Chromium) instead of Chrome
I update vue to 3.0.14
I access the app via http://localhost:8080 or a hosts file alias https://myalias:8080
AFAIK I never did anything to force a production build or disable vue devtools, so I'm stumped why it doesn't just work out of the box. What am I missing?
[UPDATE]
.env files have only VUE_APP_* variables defined.
Vue is installed locally (not using CDN version).
vue.config.devtools is not available in vue3. vue.config.performance appears to be the replacement.
Using the Vue devtools beta (6.0.0.21) does not help.
[UPDATE 2]
I upgraded all matching packages in my project to match the versions in the new Vue app for which the dev tools were working. The dev tools are now working on my app, but I don't know which package upgrade did the trick. Would still be nice if the Vue owners could provide more insight into why this occurs and how exactly to fix it.
For my situation, go to Chrome's More Tools > Extensions > Vue.js devtools > Details, and switch on the Allow access to file URLs option. Finally it works for me again.
Check that you do not have explicitly defined mode NODE_ENV in a local .env file
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
Having that would completely explain the behaviour you're experiencing and also why it works as expected on other machines.
I open vscode and start my development server via npm run serve. My app loads into chrome and upon inspection under the vue tab vuex I can see my store.
Now when I refresh the page under the vue tab it says "No App" and can no longer see my vuex store. Any thought on why the devtools stops working after a refresh? If i stop the server and restart the devtools work... but on refresh is stops.
I'm using vue devtools version 6.0.0 beta updated June 28, 2021, and chrome version 72.0.4515.131. My app is using vue 2.
Thanks for any help you can provide.
There is a similar open issue in Vue devtools version 6.0.0-beta.15 posted on their github. Seems like yours is a bug as well, you should add your own issue and steps to reproduce the issue. In the meanwhile you can downgrade the Vue devtools to a stable version.
Are you using the development or production version of Vue?
The solution for me was to use the latest development version of Vue.
You can find more about it in their documentation.
I'm using Vue DevTools beta version for my Vue 3 Application. it's perfectly detecting vue app but it's not appear in Browser developer tools. when I using Vue 2 application it's appear on Browser developer tools in perfectly.
I need to use Vue DevTools beta version with vue 3 cli application.
How can I solve this problem?
I'm using brave browser.
Thankyou.
I've installed new vue-cli project and when launched locally and opened on localhost:8080 by running
npm run serve
Vue dev tools stayed inactive. I've read that one needs to initialize Vue instance, in order for it to work, but with vue-cli, app is initialized with createApp, but not with Vue instance.
I recently had this problem using vue cli 4.5.3. After an upgrade to 4.5.4 using vue upgrade the devtools fired up.
It was my bad. I've accidentally used vue v3 instead of v2. After switching back to 2 version, works fine.
I have a vue.js + laravel installation project on my local server where the Vue.js devtools detects Vue.js and I'm able to use it. However, when I do a standalone Vue.js installation using 'vue create', Vue.js is not detected by devtools. I already allowed access to file URLs under chrome extension but it is still not working. The devtools was detecting Vue.js in the laravel version just fine without allowing access to file URLS.
Is there something else basic that I'm missing to get Vue.js devtools to work? There must be a simple step I missed because there should be loads of people creating fresh Vue.js projects on local server and getting devtools to work.
I'm using 'npm run serve' to run Vue.js in localhost, is this supposed to be detected by Vue.js devtools by default?
solved by reinstalling Vue.js 2 instead of the Vue.js 3 preview version as of 2020-08-26.