vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.68k stars 4.14k forks source link

devtool does not appear #2138

Open PabloBagliere opened 9 months ago

PabloBagliere commented 9 months ago

Vue devtools version

6.6.0

Link to minimal reproduction

https://github.com/PabloBagliere/vue2-error-devtool-quasar

Steps to reproduce & screenshots

to execute the problem is:

What is expected?

It is expected to show the vue devtool option.

Example: image

What is actually happening?

Does not display the vue devtool

image

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (6) x64 Intel(R) Core(TM) i5-9400 CPU @ 2.90GHz
    Memory: 19.58 GB / 31.21 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.10.0 - ~/.nvm/versions/node/v18.10.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.10.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.10.0/bin/npm
    pnpm: 8.7.3 - ~/.local/share/pnpm/pnpm
  Browsers:
    Brave Browser: 121.1.62.162
    Chrome: 121.0.6167.184

Any additional comments?

I use google chrome I use quasar version 1 since the project at work is old. Vue already comes in quasar and uses vue 2.7.15.

The packages I have installed are in the image

code

I tried to use legacy but it does not work well because the project uses the setup method in many components and legacy does not show the setup.

SkySor44 commented 9 months ago

This is happening for myself and my coworker all of a sudden. It was working before my last meeting and now its not working. I think the latest update broke something

WeepingBoil commented 9 months ago

me also - since 14 Feb v6.6.0. Broken?

Akryum commented 9 months ago

I can't reproduce with the provided repo on Chrome/Linux. image image

brentmitch commented 9 months ago

This isn't a solution but the Standalone version does work: https://devtools.vuejs.org/guide/installation.html#standalone

I'm running Chrome 121.0.6167.184 on Mac OS with Vue.js devtools 6.6.0 installed from the Chrome Web Store and I'm not seeing the Vue Dev Tools tab either.

GuyGeva93 commented 9 months ago

Also here. Looks like something was broken after the last update (14/2)

ajlond123 commented 9 months ago

I've disabled the latest version and reinstalled the legacy version which seems to be working for now - Legacy v5

GuyGeva93 commented 9 months ago

I've disabled the latest version and reinstalled the the legacy version which seems to be working for now - Legacy v5

Thanks, worked for me. Still it is truly necessary to fix the latest version.

AndrianLeah commented 9 months ago

Since last version I see the Vue tab but every time the page gets refreshed the plugin stops working and I have to close and reopen the tab. This didn't happen with legacy version.

PabloBagliere commented 9 months ago

@Akryum I don't know how else to help you to reproduce the error. When I click on the vue logo it does not open the dialog box in the new version. In the video you can see that the dialog box does not open and the devtool does not appear and I use the example repository that I gave you.

Grabación de pantalla desde 15-02-24 09:04:38.webm

Akryum commented 9 months ago

Can you try:

and report back?

pabloraissiguier commented 9 months ago

I'm having the same issue on mac and chrome

SkySor44 commented 9 months ago

When you are trying to reproduce the issue are you on the right version of devtools? You might have to go to the extensions manager and force an update on Vue devtools.

Also, does the legacy extension work with Vue 3?

On Thu, Feb 15, 2024, 6:58 AM Pablo Raissiguier @.***> wrote:

I'm having the same issue on mac and chrome

— Reply to this email directly, view it on GitHub https://github.com/vuejs/devtools/issues/2138#issuecomment-1946049621, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIXZP4ZOTIWP7UUHZWHE7K3YTYA7NAVCNFSM6AAAAABDI5YQ3SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBWGA2DSNRSGE . You are receiving this because you commented.Message ID: @.***>

PabloBagliere commented 9 months ago

I found out that using the incognito mode of chrome if the devtool appears, I tried other browsers and it works fine. I tried rebooting, reinstalling and it still doesn't work in normal mode. What could be the problem?

attached pictures

Incognito mode image

Standard mode image

It detects that vue exists but when selecting the devtool icon it does not open the tool, nor does it appear in the header.

Also try disabling all browser extensions.

image

Akryum commented 9 months ago

Check that the extension has 'Site access' setting set to 'On all sites':

image

Akryum commented 9 months ago

Could you try clearing the extension storage?

Make sure to have 'Developer mode' enabled in the Extensions page:

image

Open the extension menu and click on 'Inspect Popup':

image

In the Chrome devtools that opens, go to the 'Application' tab and right-click on the item below 'Local storage' and click on 'Clear':

image

SkySor44 commented 9 months ago

Could you try clearing the extension storage?

Make sure to have 'Developer mode' enabled in the Extensions page:

image

Open the extension menu and click on 'Inspect Popup':

image

In the Chrome devtools that opens, go to the 'Application' tab and right-click on the item below 'Local storage' and click on 'Clear':

image

This didn't work for me. I also installed the 6.6.1 and it still didn't resolve it. In fact, now I can't inspect the popup anymore

PabloBagliere commented 9 months ago

It didn't work, directly the localstorage is empty, maybe the error is there because the localstorage is never filled with any value. image of how I have the localstorage

image

Akryum commented 9 months ago

Does it work in edge?

PabloBagliere commented 9 months ago

Yes in edge and breave (firefox did not update the version) that seems to me the strangest thing so I started the issues.

Example photo

edge: image

image

Brave:

image

image

skjnldsv commented 9 months ago

Same here, doesn't work on brave. Version 1.62.165 Chromium: 121.0.6167.184

This didn't work for me. I also installed the 6.6.1 and it still didn't resolve it. In fact, now I can't inspect the popup anymore

Same, can't inspect the popup

EDIT: downgrading to 6.5.1 works :+1: nhdogjmejiglipccpnnnanhbledajbpd-6.5.1.zip (rename to crx)

jsodeman commented 9 months ago

Same issue on Chrome 121.0.6167.185 Windows 11. The panel just stopped opening within the last 2 days. Restarted the everything, tried the cache clearing from a few posts above. It's not site specific.

Edit: the downgrade to 6.5.1 fixed it for me too. 6.6.0 looks like a big update, must be something causing problems in there.

Joshwawo commented 9 months ago

Same here, doesn't work on brave. Version 1.62.165 Chromium: 121.0.6167.184

This didn't work for me. I also installed the 6.6.1 and it still didn't resolve it. In fact, now I can't inspect the popup anymore

Same, can't inspect the popup

EDIT: downgrading to 6.5.1 works 👍 nhdogjmejiglipccpnnnanhbledajbpd-6.5.1.zip (rename to crx)

I tried everything because the 'pinia' option didn't appear, but this is the only thing that has worked for me

udithishara commented 9 months ago

@skjnldsv Thank you for this, v6.6.0 broke most of the stuff and slow compared to v6.5.1, only solution was to rollback to a previous version for me

Zenkylo commented 9 months ago

The extension randomly stopped working for me using Brave. Was using it for years with no issues. I also tried re-installing the legacy version and that also wouldn't work. I cleared every setting I could in Brave and neither would work. I did notice it worked in incognito, however.

I restarted my computer. No effect. I uninstalled and re-installed Brave. No effect. I uninstalled and purged everything Brave on my computer. On Mac this was /Users/{user}/Library/Application Support/BraveSoftware, then reinstalled Brave and installed the extension. This worked. However, I've lost all my browser preferences, settings etc., which I was prepared for. Quite a damper on my workflow. I'd suggest at least exporting your bookmarks before you do a fresh re-install.

Not sure if a Brave or extension issue.

Edit: I've never users the Brave profile functionality but perhaps that would help mitigate any loss of preferences, settings, etc.

Akryum commented 9 months ago

Maybe it's somehow caused by the migration to Manifest V3...

AdoKevin commented 9 months ago

Hey guys, it seems that FORCE REFRESH can be helpful. My setps are:

  1. closing the chrome developer tools,
  2. FORCE REFRESH (Ctrl + F5 or Ctrl + Shift + F5 depends on your setting) the page,
  3. open chrome devtools again. Finally, I got the Vue DevTools again.

Hope this trick can inspire somebody to resole this. @Akryum are there something wrong with extension initilization lifecycle?

Version 1.62.165 Chromium: 121.0.6167.184 on Windows 11. Vue 2.7 load from cdn.

mohamad68 commented 9 months ago

vue-dev tools not working any more

vogtm commented 9 months ago

I have the same problem, it does not work in normal chrome profiles. For me, it actually works and appears in Incognito tabs.

Maybe it's helpful for debugging the problem.

Akryum commented 9 months ago

Maybe try exporting your bookmarks and reseting the Chrome profile

skjnldsv commented 9 months ago

@Akryum That's not really acceptable imho. I have many other extensions using manifest v3 :)

Please note that the extension DOES show up in the toolbar, and the logo is green. But clicking on it does not show the usual Vue is detected, it does nothing.

I think this is really a problem with the extension itself

Akryum commented 9 months ago

It's not a matter of it being acceptable, it's all about trying to find the cause of the issue. This is all made extra difficult because I can't reproduce it myself and neither can a lot of people.

Akryum commented 9 months ago

Maybe you can try to create a new profile.


Could anyone also try to right-click in the blank extension drop-down and paste the console content?

vogtm commented 9 months ago

All right I was faffing around a bit - same train of thought.

With the chrome devtools for the devtools open, and reloading it with 'cmd r' the vue devtools show up and the console logs:

Bildschirmfoto 2024-02-20 um 18 42 37

Edit: oh, when then clicking on the vue devtools tab, it will open propperly and the devtools devtools will show another warning: Bildschirmfoto 2024-02-20 um 18 48 16

vogtm commented 9 months ago

Maybe you can try to create a new profile.

Could anyone also try to right-click in the blank extension drop-down and paste the console content?

Tried it, and - at least for me - it seemed to work after installing the vue devtools on that profile. Also the errors above does not appear with the new profile.

Will investigate further

Akryum commented 9 months ago

@vogtm Those warnings can be safely ignored

jsodeman commented 9 months ago

I tried my laptop and devtools is working on it, but not on my desktop. Both are running the same version of Chrome, both on up to date Windows 11, both signed into the same Google account. Same code, same version of node.

woodinteractive commented 9 months ago

I work in a team with three other developers. All of us are using the same computers, the same version of OS, the same browsers (same version, Chrome Version 121.0.6167.184 (Official Build) (arm64)), and the same projects from the same repo. They aren't having any issues with the extension whereas I am.

I installed the DevTools extension on Firefox and was able to get it to load, however, it wouldn't register Pinia. This feels like a cache issue related to the browser at the OS level or something beyond my ability to diagnose.

skjnldsv commented 9 months ago

It's not a matter of it being acceptable, it's all about trying to find the cause of the issue.

Sorry, should I been more clear :see_no_evil: The bug is fine, it happens! What is not acceptable is "creating a new profile" as a workaround imho :)

vogtm commented 9 months ago

After trying more stuff yesterday evening I have found nothing obvious.

But to summarize my observations: It works in newly created chrome profiles. It works in incognito tabs

It works in "broken" profiles when:

My assumption would be similar to @woodinteractive that there is a weird chrome caching / extension thing going on. Are there other extensions that recently shown the same problems? Maybe there are people from the chrome devtools team we can reach out to that might have a rough idea what could be the problem? By now, it seems more like a chrome bug to me than a vue devtool bug.

Update on the "do other extensions experience something like this": https://github.com/sveltejs/svelte-devtools/issues/184

mohamad68 commented 9 months ago

Here are the steps that worked for me:

Update Chrome to the latest version. Completely remove the previous Vue DevTools installation. Install Vue DevTools version 6.6.1. Right-click on the Vue DevTools icon at the top and select 'Inspect popup,' then proceed to clear all storage applications

urbgimtam commented 9 months ago

@mohamad68 Thanks, that worked for me too. I had it running in incognito mode, but even after unregistering all service workers, it still didn't work. I also had to remove the "update on reload" check from the service workers, then it started working.

gluebi commented 9 months ago

I also had to remove the "update on reload" check from the service workers, then it started working.

That seems to be it. Disabling it makes the vue dev tools appear. Rechecking makes them disappear again.

bksubramanyarao commented 9 months ago

i followed @mohamad68 which did not work but after following @urbgimtam it started working, thanks everyone

Akryum commented 9 months ago

Looks like something is wrong with the service worker (Manifest V3) :(

jsodeman commented 9 months ago

I also got it working after following the steps by @mohamad68 and @urbgimtam. The Chrome update put me on version 122.0.6261.58.

skjnldsv commented 9 months ago

Worked too! Thanks @mohamad68 !

jsodeman commented 9 months ago

A note for those using Vue 3 and Vite, you can use this plugin or app instead:

https://devtools-next.vuejs.org/

woodinteractive commented 9 months ago

I also had to remove the "update on reload" check from the service workers, then it started working.

That seems to be it. Disabling it makes the vue dev tools appear. Rechecking makes them disappear again.

This 100% fixed it for me.

qroulland commented 9 months ago

The solution of @urbgimtam works for me on MacOS Chrome 🙌🏻

llemllen commented 9 months ago

Worked remove 'update on reload'. When Vue DevTools cannot be opened, it may cause some other extensions to fail to popup. Restarting the browser is required for them to popup again.