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'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.
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.
I am trying to access my VueJS application running on my node server on IE11 by accessing the URL http://localhost:8080. However I cant access the same as only a blank screen appears. I have babel polyfill installed and imported in my main file and have babel presets already setup in babelrc file.
My app is currently running and is accessible on Chrome but not on IE11.
I don't get a single error message in console and have no clue what could be going wrong. Has anyone ever faced this?
You need to use polyfills. IE11 does not support ES2015, it needs to be transiled by babel. There seem to be various ways of doing this.
Please check this guide: jacklyons.me/how-to-fix-vuejs-not-working-in-ie11
or here: cli.vuejs.org/guide/browser-compatibility.html
I started using vue dev-tools in my application but it is not visible when in developer mode in Chrome. I tried various solutions found on the dev-tools github page and in other places on the web, but no luck. Below are the things i have done/tried to get it to display.
Enabled allow access to file URL’s option in the chrome extension
Added Vue.config.debug = true; Vue.config.devtools = true; just before new Vue({})
Added non-minified versions of VueJS file
Also I am using Chrome latest version: 55.0.2883.87.
I do get the following message when I click on the chrome extension
Except the panel is not actually showing.
Does anyone have a solution to this? Thanks.
I could not get the Vue icon to be active on the menu bar, however I was able to get the Vue tab to show in the Chrome developer tools. Try the following:
Close the Chrome developer tools window
Hard refresh the browser
Re-open the developer tools window and look for the Vue tab
The icon in the toolbar might still indicate that it cannot detect Vue, but the tab should be visible in the Chrome developer tools.
I had this same issue, I was using minified vue from cdn "vue.min.js" .Then I removed that and used non-minified vue. Then I reloaded browser and reopened console and the vue tab was there.
For me, I was running a local HTML file. By default, Chrome blocks extensions from working on local files.
3-dot menu -> More Tools -> Extensions
Find the Vue extension, click details and change turn on the setting "Allow access to file URLs:
Screenshot
close & reopen chrome
Also found today that if you have an ad blocker installed that this also stops Vue Devtools from running properly.
Closing the file tab and reopening it worked for me.
Restart many times Google Chrome
Don't use min file
And add before new vue instantiation:
Vue.config.devtools = true;
chrome developer tools should be close before enabling the vue dev tools extention...
(if chrome devtools is open, close chrome development tools and re-open)
Just do a "hard reload" for a few times. On windows: SHIFT + F5.
On Mac: CMD + SHIFT + R.
Use the devtools beta for Vue 3. And always check if your Vue app mounted correctly.
Step 1: add vue.js devtools as an extension from here
step 2: After adding vue.js devtools, close your browser.
Step 3: Open your browser and open your html page.
Step 4: click right side of your mouse and select inspect and try to find Vue.
Note: If you didn't added the CDN of vue.js, then add these line to your html file.
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
You should enable Allow access to file URLs from Vue extension and then hard refresh your page with Shift + F5
It worked for me
(For Firefox Browser) If the add-ons 'Vue.js devtools' is added in browser..Just click on Inspect Element (or press F12) and there is a tab of Vue along with Inspector, Console, Network etc. Click on that Vue tab and enjoy debugging.
Just do hard reload and close development console then reopen it.
Hard Reload, help me.
Open devtools -> right click on reload button -> Hard Reload
Please make sure you don't use the production CDN. The only way that make it work for me is to use the VueJS dev version.
Development : vue.js
This happens to me periodically, pretty annoying because there seems to be no cause.
Go to Chrome browser extensions
Remove the Vue DevTools extension
Add it back again
Hard refresh your page
Chrome - Version 71.0.3578.98
MacOS Mojave 10.14
VueJS 2.5.21
close the chrome app
re-run development server
re-open chrome app
open localhost
press F12 (to open development tools)
In case you are using vue3, uninstall Vue devtool extension and install the beta version.
you can install it for chrome from the below link:
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
In #Daryn answer he mention that he has problems witch vue icon - here is solution to this part of running vue extension on chrome which in the same time also solve OP problem for me:
During plugin installation for short moment in upper right chrome corner the VUE ICON appears with message (screenshot is not my):
And CRITICAL is to click right button on that icon (without close that message!) and choose "PIN" (it pin to extensions icons bar) - if you not do it - then you will never see that icon again (which is mistake). After that shut down and reopen chrome. And now in you page with vue, this icon should have green colors (you can click on it) and click right button on some page element (or on screen center) and choose "Inspect" to see
maybe you can go to settings then go to preferences then look for persistence then enable local overrides, sorry my english is not good
Don't know if this helps but make sure to refer to app.js in your view file you are rendering in your current path. Laravel example from view file: <script src="{{ asset('js/app.js') }}" defer></script>
This way the vue extension starded working for me.
You should run
npm run watch
or
npm run dev
otherwise you can not see Vue Toolbar
Restarting Chrome worked for me
Maybe obvious but the Vue panel is not available when in incognito mode. In this case, the Vue icon is not visible either.
Enter chrome://extensions in the address bar and click on Details for Vue.js devtools. Scroll down to "Allow in Incognito" and switch to On.
don't forget about
npm run dev
(or something like in your project)
And then try advisions from first answers