VueJs dev tools panel not showing

Vuejs2vue.jsVue Resource

Vuejs2 Problem Overview

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.

  1. Enabled allow access to file URL’s option in the chrome extension
  2. Added Vue.config.debug = true; Vue.config.devtools = true; just before new Vue({})
  3. Added non-minified versions of VueJS file
  4. Also I am using Chrome latest version: 55.0.2883.87.

I do get the following message when I click on the chrome extension enter image description here

Except the panel is not actually showing.

Does anyone have a solution to this? Thanks.

Vuejs2 Solutions

Solution 1 - Vuejs2

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.

Solution 2 - Vuejs2

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.

Solution 3 - Vuejs2

Also found today that if you have an ad blocker installed that this also stops Vue Devtools from running properly.

Solution 4 - Vuejs2

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

Solution 5 - Vuejs2

Closing the file tab and reopening it worked for me.

Solution 6 - Vuejs2

  • Restart many times Google Chrome

  • Don't use min file

  • And add before new vue instantiation:

      Vue.config.devtools = true;

Solution 7 - Vuejs2

Just do a "hard reload" for a few times. On windows: SHIFT + F5. On Mac: CMD + SHIFT + R.

Solution 8 - Vuejs2

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>

Solution 9 - Vuejs2

You should enable Allow access to file URLs from Vue extension and then hard refresh your page with Shift + F5 It worked for me

Solution 10 - Vuejs2

(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.

Solution 11 - Vuejs2

Use the devtools beta for Vue 3. And always check if your Vue app mounted correctly.

Solution 12 - Vuejs2

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)

Solution 13 - Vuejs2

Just do hard reload and close development console then reopen it.

Solution 14 - Vuejs2

Hard Reload, help me.

Open devtools -> right click on reload button -> Hard Reload

Solution 15 - Vuejs2

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

Solution 16 - Vuejs2

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

Solution 17 - Vuejs2

  1. close the chrome app
  2. re-run development server
  3. re-open chrome app
  4. open localhost
  5. press F12 (to open development tools)

Solution 18 - Vuejs2

Maybe obvious but the Vue panel is not available when in incognito mode. In this case, the Vue icon is not visible either.

Solution 19 - Vuejs2

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

Solution 20 - Vuejs2

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):

enter image description here

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

enter image description here

Solution 21 - Vuejs2

maybe you can go to settings then go to preferences then look for persistence then enable local overrides, sorry my english is not good

Solution 22 - Vuejs2

don't forget about

npm run dev

(or something like in your project)

And then try advisions from first answers

Solution 23 - Vuejs2

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.

Categories
Recommended Vuejs2 Solutions
Recommended vue.js Solutions
Recommended Vue Resource Solutions

Previous Solution:

NameError: name 'request' is not defined

PythonFlask

Next Solution:

Strange symbol shows up on website (L SEP)?

HtmlWordpressAscii

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMalikView Question on Stackoverflow
Solution 1 - Vuejs2DarynView Answer on Stackoverflow
Solution 2 - Vuejs2Romy GomesView Answer on Stackoverflow
Solution 3 - Vuejs2Steven GrantView Answer on Stackoverflow
Solution 4 - Vuejs2swiftB3View Answer on Stackoverflow
Solution 5 - Vuejs2Bhoomika ChauhanView Answer on Stackoverflow
Solution 6 - Vuejs2Wilfried KakouView Answer on Stackoverflow
Solution 7 - Vuejs2user6023290View Answer on Stackoverflow
Solution 8 - Vuejs2Sayad Ahmed ShaurovView Answer on Stackoverflow
Solution 9 - Vuejs2Saeed RayatMoghadamView Answer on Stackoverflow
Solution 10 - Vuejs2abhijeetThakurView Answer on Stackoverflow
Solution 11 - Vuejs2Ostap BrehinView Answer on Stackoverflow
Solution 12 - Vuejs2Akin ZemanView Answer on Stackoverflow
Solution 13 - Vuejs2thavoracView Answer on Stackoverflow
Solution 14 - Vuejs2Marcin WroneckiView Answer on Stackoverflow
Solution 15 - Vuejs2Mohamed Salem LamiriView Answer on Stackoverflow
Solution 16 - Vuejs2Eric ProstkoView Answer on Stackoverflow
Solution 17 - Vuejs2Edsel AyalaView Answer on Stackoverflow
Solution 18 - Vuejs213thbitView Answer on Stackoverflow
Solution 19 - Vuejs2Alireza BahrololoomView Answer on Stackoverflow
Solution 20 - Vuejs2Kamil KiełczewskiView Answer on Stackoverflow
Solution 21 - Vuejs2SafuhView Answer on Stackoverflow
Solution 22 - Vuejs2Necro The HumanView Answer on Stackoverflow
Solution 23 - Vuejs2Aftersun LotionView Answer on Stackoverflow