Vue devtools inspection is not available on locally hosted app

Question

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.

Answer 1

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.

Answer 2

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.