devtool does not appear

[PabloBagliere]

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:

• install dependeny (pnpm i)
• run (pnpm dev)

What is expected?

It is expected to show the vue devtool option.

Example:

What is actually happening?

Does not display the vue devtool

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

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.

[juanhuerta]

@mohamad68 removing "update on reload" check worked for me, thanks!

[CameronSmithSPT]

I cleared all the storage but the "Update on reload" checkbox was not checked for me so that hasn't solved it in my case. I can right-click on Vue DevTools and choose "Reload Frame" which saves me having to close and re-open the Developer Tools window completely. Still not ideal but it is faster.

[GuyGeva93]

Hello, is there any update? Does the newest version work?

[jsodeman]

For me the "Update on reload" fix is only temporary, and I have to toggle it on and back off to get devtools to reload again after a while.

[irfanfadilah]

This issue is affecting many users and can be easily reproduced. The label should be updated.

Unchecking the Service Workers' "Update on reload" is the only temporary fix that worked for me.

[xiaoxustudio]

I had the same problem on Edge browser, react devtool will add options here, but vue devtool can't find any entry.

react devtools vue devtools

[duduindo]

Unchecking the Service Workers' "Update on reload" worked for me too.

[xiaoxustudio]

I had the same problem on Edge browser, react devtool will add options here, but vue devtool can't find any entry.

react devtools vue devtools

Mine can be displayed, but once I use the middle of the mouse to close the vue devtools TAB, I won't be able to find any entry to re-add it, only to reopen the console

[okaufmann]

Unchecking the Service Workers' "Update on reload" worked for me too.

Worked for me too

[urbgimtam]

Unfortunately, I can't see it anymore, even after unchecking the Service Workers' "Update on Reload", when using Nuxt > 3.10.x. and VueDevtools 6.6.1.

It works with Vue directly (maybe some of the latest updates of both Nuxt and Vue Devtools created the issue?).

Its a really strange behaviour. The extension detects the presence of Nuxt+Vue, and its even present on the DOM.

But never shows up on the Chrome devtools. Same behavior on Firefox, which may help to understand if its a direct bug or a Chrome caching issue.

As a last resort, I've tried to use Vue Devtools standalone, but it also errors out saying:

Uncaught Error: Dynamic require of "crypto" is not supported

Anyone found out more?

[Dual-Ice]

Unchecking the Service Workers' "Update on reload" worked for me too. But tools behaves strange and sometimes couldn't shows updated information

[jankrnavek]

The same problem with VueDevTools 6.6.1 Unchecking the Service Workers' "Update on Reload" doesn`t work for me as well. Reinstallation of Brave had not effect too...

Windows 11 Brave [Version 1.64.109 Chromium: 123.0.6312.58 (Official Build) (64-bit)]

Tested on Nuxt 3.11, Vue 3.4.21 apps...

[urbgimtam]

Ok, another weird behaviour that could help tracking this.

On an existing project with Nuxt 3.10.3 and Vue 3.4.20 (don't remember the Nitro version), Vue devtools was detected and its tab appeared on Chrome Devtools. Updating the project to Nuxt v3.11/Vue 3.4.21 without closing the Chrome DevTools allowed to use it without problems. As soon as I closed and reopened the Chrome Devtools, Vue Devtools doesn't show anymore.

Funny thing is created new Nuxt project with Nuxt 3.10.3, Vue 3.4.20 and even downgraded Nitro to 2.9.0, removed node modules/ and package-lock.json, and still I can't get Vue Devtools to show up again.

Could it be one of the dependencies?

[urbgimtam]

Downgrading nuxt devtools to 1.8.0 seems to allow VueDevtools to work again. https://github.com/nuxt/devtools/issues/634

[Dual-Ice]

Also vue-devtools can be downgraded to 5.6, but for me it isn't comfortable

[luanhenzo]

Downgrading nuxt devtools to 1.8.0 seems to allow VueDevtools to work again. nuxt/devtools#634

Thanks. Disabling Nuxt Devtools made Vue Devtools panel appear again.

[sed9xa]

This worked perfectly fine for me I think there is something with nuxt devtools version.

[didaquis]

I have same problem on macOS using Chrome.

[luanhenzo]

Fixed in @nuxt/devtools 1.1.5.

[KaskoYurii]

The same issue: Since the latest 2-3 Chrome updates. Chrome: Version 123.0.6312.87 (Official Build) (arm64) DevTools: Version 6.6.1 macOS Sonoma Version 14.4.1

Don’t have any other devtools.

[j-chronogram]

Thanks. Disabling Nuxt Devtools made Vue Devtools panel appear again.

This worked for me as well, thank you!