Vue.js is detected but the Vue Panel is not showing

rafito commented 4 years ago

Version

5.3.3

Browser and OS info

Chrome 83.0.4103.97 / Windows 10

Steps to reproduce

After enter the page Vue.js is detected on this page. The message "Open DevTools and look for the Vue panel" at the Vue-devtools icon.

What is expected?

Appears Vue Panel on DevTools

What is actually happening?

It's not appearing

ldavisCEI commented 4 years ago

I found this suggestion that worked for me. It is a good work around.

Go to the DevTools settings
Under Apperance, choose a different theme
The Vue Panel should be back now in DevTools
Go back to dev tools settings and put your theme back to what you had before
The Vue Panel should still be there

I hope this works for you too.

rafito commented 4 years ago

It worked! Thank you very much!

On Wed, Jun 10, 2020 at 7:38 AM landocalris notifications@github.com wrote:

I found this https://github.com/vuejs/vue-devtools/issues/1072#issue-497741297 suggestion that worked for me. It is a good work around.

Go to the DevTools settings

Under Apperance, choose a different theme

The Vue Panel should be back now in DevTools

Go back to dev tools settings and put your theme back to what you had before

The Vue Panel should still be there

I hope this works for you too.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/vuejs/vue-devtools/issues/1209#issuecomment-641916382, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKZ62LWS4TCHT77RDASND3RV5PD3ANCNFSM4NYNRQHQ .

Fax commented 4 years ago

I have the same issue here with Chrome Version 83.0.4103.97 (Official Build) (64-bit). Updating the theme didn't fix the issue, the vue tab is still not visible.

diazemiliano commented 4 years ago

F#@k!!!, I've lost many many time with this!!!! Thanks @landocalris

CobyYates commented 4 years ago

Worked for me! Thanks @landocalris

ChrisBFusion commented 4 years ago

The above workaround does not work in Firefox.

rustinlewis commented 4 years ago

I'm having the same problem and none of these suggestions nor any other I've been able to google is causing it to show again. Dang it's much harder to developer when I can't see my state.

macOs Catalina 10.15.5 Version 83.0.4103.106 (Official Build) (64-bit)

pedro380085 commented 4 years ago

Here doesn't work either.

clemsontiger commented 4 years ago

Well this doesn't seem to always fix the issue for me. very frustrating

themnd commented 4 years ago

I can confirm the workaround (https://github.com/vuejs/vue-devtools/issues/1209#issuecomment-641916382) with Chrome Version 84.0.4147.105 (Official Build) (64-bit) on mac os x 10.14.6

TheKeymaster commented 4 years ago

Make sure that Vue is not accidentally set in production mode. For me changing it to Development Mode fixed the issue.

yuriybabenko commented 4 years ago

Same problem on OSX 10.15.6 and Chrome 85.0.4183.83. None of the above-mentioned solutions have worked.

// edit - my issue was actually caused by a bug in the code which was not picked up by linters and still allowed everything to be compiled normally. Fun times!

HmHasan commented 4 years ago

I found this suggestion that worked for me. It is a good work around.

Go to the DevTools settings

Under Apperance, choose a different theme

The Vue Panel should be back now in DevTools

Go back to dev tools settings and put your theme back to what you had before

The Vue Panel should still be there

I hope this works for you too.

wellssu0 commented 4 years ago

Switch on or off the plugin several times, and then change the theme
Or turn off the devtools of vue2, and then change the theme

HmHasan commented 4 years ago

Thank You Its Work For Me

On Mon, Sep 21, 2020 at 1:22 PM Wells Su notifications@github.com wrote:

Switch on or off the plugin several times, and then change the theme

Or turn off the devtools of vue2, and then change the theme

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/vuejs/vue-devtools/issues/1209#issuecomment-695947091, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL2B5WCWVFUEDYFY3FIRIILSG35K5ANCNFSM4NYNRQHQ .

ahprasandh commented 4 years ago

This worked for me.

https://github.com/vuejs/vue-devtools/issues/620#issuecomment-699594776

martin-masterclass commented 4 years ago

Works like a charme! Thank you! Here a screenshot of how to find the appearance settings in Chrome:

tommydemarco commented 4 years ago

Switch on or off the plugin several times, and then change the theme

Or turn off the devtools of vue2, and then change the theme

This worked for me. Thanks.

MinSomai commented 4 years ago

turning off the vue2 devtools and changing the theme worked for me.

kevinsbath commented 4 years ago

Nothing worked for me - until I opened the devtools settings, and clicked 'restore defaults and reload" in the bottom right of the settings screen.

Vue pane now visible. :-)

blizzardKv commented 4 years ago

work for me - up vue-router to vue-router@next and any plugins that use vue2, firstly just installed router for vue2 this breaks imports in main.js file and dev mode in devtools

ATJohnson83 commented 3 years ago

Deleting and re-installing the vue devtools (beta version) plus restoring the devtools defaults for chrome did the trick for me.

abdellahrk commented 3 years ago

I found this suggestion that worked for me. It is a good work around.

Go to the DevTools settings

Under Apperance, choose a different theme

The Vue Panel should be back now in DevTools

Go back to dev tools settings and put your theme back to what you had before

The Vue Panel should still be there

I hope this works for you too.

Thank you so. It works.

hsyntnc commented 3 years ago

I just removed the regular vue devtools, installed beta version for vue3 and it worked for me.

jovialcore commented 3 years ago

I found this suggestion that worked for me. It is a good work around.

Go to the DevTools settings

Under Apperance, choose a different theme

The Vue Panel should be back now in DevTools

Go back to dev tools settings and put your theme back to what you had before

The Vue Panel should still be there

I hope this works for you too.

Your solution worked for me. Thanks

samuel012 commented 3 years ago

I just removed the regular vue devtools, installed beta version for vue3 and it worked for me.

Actually, this worked for me, but I had to do an additional step. All in all, these are the steps:

remove regular vue devtools
remove the new vue devtools (since i have them both installed)
re-add the new vue devtools

That's it.

yxw007 commented 3 years ago

I just removed the regular vue devtools, installed beta version for vue3 and it worked for me.

Actually, this worked for me, but I had to do an additional step. All in all, these are the steps:

remove regular vue devtools

remove the new vue devtools (since i have them both installed)

re-add the new vue devtools

That's it.

thanks ~ haha

B45i commented 3 years ago

I found this suggestion that worked for me. It is a good work around.

Go to the DevTools settings

Under Apperance, choose a different theme

The Vue Panel should be back now in DevTools

Go back to dev tools settings and put your theme back to what you had before

The Vue Panel should still be there

I hope this works for you too.

Install vue dev tool beta from here, then try these steps (Disable normal vue dev tool as well)

ogelin commented 3 years ago

None of these work for me, still facing the issue.

edcast45 commented 3 years ago

Thanks, @B45i this helped. Also, it may help to have the Beta version instead of the regular version.

camohub commented 3 years ago

Beta version works. But why stable version not?

Akryum commented 3 years ago

@camohub Stable doesn't support Vue 3

Zonciu commented 3 years ago

This works for 6.x version, you need to remove or disable 5.x version before doing this.

I found this suggestion that worked for me. It is a good work around.

Go to the DevTools settings

Under Apperance, choose a different theme

The Vue Panel should be back now in DevTools

Go back to dev tools settings and put your theme back to what you had before

The Vue Panel should still be there

I hope this works for you too.

J-Rojas commented 3 years ago

The workaround does't work for me on Chromium v83 using Vue 2. The Vue Icon is green, showing that Vue is detected, but the panel is missing.

kalinchernev commented 3 years ago

Yep, turning the extension off and on again actually did work https://www.youtube.com/watch?v=p85xwZ_OLX0

EasonApolo commented 3 years ago

My case is I used a internal vue.js, which does not have a .min extension, but its content seems like a minimized version... If those workarounds not help, maybe you should check your vue resource is not vue.min.js

esmaydogdu commented 3 years ago

I installed the beta version, and I also had to play with the settings, finally worked! Thank you!

Qzhor commented 3 years ago

remove all the plugins, just like react, redux, vue-performance, old vue devtool.... restart your chrome wow ,it works!

kamil-kielczewski commented 3 years ago

For me this was critical:

During installation plugin 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 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 sould have green colors (you can click on it) and click right click on some page element (or on screen center) and choose "inspect element". - and in chrome console you should see

If this not helps - also try https://github.com/vuejs/devtools/issues/620

jaredmeadowsLB commented 3 years ago

I had already installed the Beta version, removed the old version of Vue devtools, but it still wasn't working, then I finally closed devtools and reopened them, and the tab showed up! TL;DR: if nothing works for you, try just closing the panel and reopen the Chrome devtools panel!

Akryum commented 3 years ago

https://devtools.vuejs.org/guide/faq.html#the-vue-devtools-don-t-show-up

bashunaimiroy commented 3 years ago

For me this was critical:

During installation plugin for short moment in upper right chrome corner the VUE ICON appears with message And CRITICAL is to click right button on that icon (without close that message!) and choose "PIN" (it to extensions

Hi @kamil-kielczewski, I think this is a different issue- and you should be able to Pin and Unpin any extension at any time by clicking the Extensions icon, as shown. Scroll down to Vue Devtools and Pin it or Unpin it using the little thumbtack icon.

bashunaimiroy commented 2 years ago

For what it's worth, reloading the Chrome Devtools window also works, and I suspect the "new theme" trick works because it includes a Chrome Devtools reload under the hood.

The MacOS keyboard (when Devtools is focused, at least) is Option+R. You can also bring up the Command Palette in Devtools and type "reload".

Note: This is incredibly and inexplicably hard to Google, and it's not documented in Devtools docs as far as I can tell. This is really bizarre, because it seems like pretty core functionality and is very helpful in cases like these.