devtools: devtool does not appear

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

About this issue

  • Original URL
  • State: open
  • Created 5 months ago
  • Reactions: 22
  • Comments: 71 (11 by maintainers)

Most upvoted comments

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

+30
urbgimtam on Feb 21, 2024

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)

+12
skjnldsv on Feb 16, 2024

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.

+10
woodinteractive on Feb 21, 2024

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

+10
mohamad68 on Feb 21, 2024

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.

+7
brentmitch on Feb 14, 2024

Unchecking the Service Workers’ “Update on reload” worked for me too.

image

+6
duduindo on Mar 13, 2024

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

+6
SkySor44 on Feb 14, 2024

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.

+5
gluebi on Feb 21, 2024

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

+4
Akryum on Feb 21, 2024

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

+4
SkySor44 on Feb 15, 2024

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

+4
PabloBagliere on Feb 15, 2024

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

+4
GuyGeva93 on Feb 15, 2024

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

+4
WeepingBoil on Feb 14, 2024

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.

+3
irfanfadilah on Mar 8, 2024

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

+3
jsodeman on Feb 21, 2024

@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

+3
skjnldsv on Feb 20, 2024

Maybe try exporting your bookmarks and reseting the Chrome profile

+3
Akryum on Feb 20, 2024

Maybe it’s somehow caused by the migration to Manifest V3…

+3
Akryum on Feb 19, 2024

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.

+3
GuyGeva93 on Feb 15, 2024

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

+2
urbgimtam on Mar 23, 2024

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

+2
bksubramanyarao on Feb 21, 2024

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.

+2
vogtm on Feb 20, 2024

I’m having the same issue on mac and chrome

+2
pabloraissiguier on Feb 15, 2024

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

+2
ajlond123 on Feb 15, 2024

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.

+1
luanhenzo on Mar 25, 2024

Unchecking the Service Workers’ “Update on reload” worked for me too.

image

Worked for me too

+1
okaufmann on Mar 17, 2024

Worked too! Thanks @mohamad68 !

+1
skjnldsv on Feb 21, 2024

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:

  • open your page with vue code (e.g. localhost:8080)
  • open chrome devtools (⌘ ⌥ i )
  • with the chrome devtools in focus open the chrome devtools for the chrome devtools (⌘ ⌥ i ) -> I call them internal devtools in the next step
  • with the internal devtool in focus refresh (⌘ r) -> a new normal tab opens with devtools://devtools/bundled/device_mode_emulation_frame.html?..
  • the (normal) chrome devtools also reload and the vue devtools show up and are useable (Maybe someone with the bug can check if they can reproduce the steps above with the same results)

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

+1
vogtm on Feb 21, 2024

@vogtm Those warnings can be safely ignored

+1
Akryum on Feb 20, 2024

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.

+1
Akryum on Feb 20, 2024

@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

+1
udithishara on Feb 17, 2024

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

+1
PabloBagliere on Feb 15, 2024
Read more comments on GitHub
← devtools: Crash if third party cookies are blocked
devtools: Duplicate Component Trees →