devtools
devtools copied to clipboard
vuejs
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:
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.
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
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.
I've disabled the latest version and reinstalled the legacy version which seems to be working for now - Legacy v5
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.
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.
@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
Can you try:
- restarting chrome
- restarting the computer
- another browser such as Firefox or Edge
and report back?
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: @.***>
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
Standard mode
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.
Could you try clearing the extension storage?
Make sure to have 'Developer mode' enabled in the Extensions page:
Open the extension menu and click on 'Inspect Popup':
In the Chrome devtools that opens, go to the 'Application' tab and right-click on the item below 'Local storage' and click on 'Clear':
Could you try clearing the extension storage?
Make sure to have 'Developer mode' enabled in the Extensions page:
Open the extension menu and click on 'Inspect Popup':
In the Chrome devtools that opens, go to the 'Application' tab and right-click on the item below 'Local storage' and click on 'Clear':
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
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
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:
Brave:
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)
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.
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
@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
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.
Hey guys, it seems that FORCE REFRESH can be helpful. My setps are:
- closing the chrome developer tools,
- FORCE REFRESH (Ctrl + F5 or Ctrl + Shift + F5 depends on your setting) the page,
- 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.
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 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