Dev tools not activating

[rrd108]

Version

6.1.3

Browser and OS info

Chrome 99.0.4844.74 / 5.15.28-1-MANJARO

Steps to reproduce

npm run dev a vite project
open localhost:3000

What is expected?

The dev tools icon should turn to green and on the chrome dev tools there should be a vue tab

What is actually happening?

The vue dev tools icon stays gray, no vue tab on the chrome dev tools

---

It seems to me that sometimes it works, but I was not able to figure why and when

[scp-nm]

I've been experiencing the same issue, sometimes closing the Chrome DevTools panel and re-opening it again solves the problem, but not consistently.

[pm-zr]

I have also had this issue and usually the solution above works, but as of today it seems that devtools just won't connect to several sites I had no issue connecting to within the last week.

[pm-zr]

I just downgraded to 6.0.13 because it was the most recent version available on crx4chrome.com and local builds failed repeatedly. The extension now connects successfully to the previously affected sites

[georgyKurian]

I have the same issue but in my case, the Vue icon is active but the devtool bar is not activated.

Vue version: 2.6.14.
Chrome: 99.0.4844.74
Vue Devtools Extension: 6.1.3

[byronogis]

I just downgraded to 6.0.13 because it was the most recent version available on crx4chrome.com and local builds failed repeatedly. The extension now connects successfully to the previously affected sites

it worked
Vue 3.2.16
Chrome 99.0.4844.51

[pm-zr]

After fighting auto updates for a few days, I noticed the new extension was working on a separate chrome profile which led me to believe the extension alone was not the problem. I cleared the application cache ("clear site data" under devtools > application) for localhost and restarted chrome and now the new version (6.1.3) is working at least on sites tested so far where it previously did not work.

[ID157]

I have the same issue.
In my case,

Browser: Google Chrome
Devtools version: 6.1.3
Vue version: 2.6.12
Nuxt version: 2.15.8
devtools = true and productionTip = false is already configured in nuxt.config.js

and after debugging packages/shell-chrome/src/detector.js, I found the application works well when I change delay value of setTimeout function in detect funtion from 100 to 1000. I think in the case of large application, detect function is executed before $root is added to window.$nuxt.

[ID157]

vuejs/devtools@c888003
Thank you!

[AurelieV]

I have tried the new version without success.
The plugin detects Vue on the page, but the Vue tab does not show up in the devtools.

Vue version: 3.2.19
Devtools version: 6.1.4
Chrome version: Version 100.0.4896.60 (Build officiel) (64 bits) (just updated it, but had the problem before)
OS: Windows 10 Pro / 19042.1586

Other coworkers has the same problem on Mac/Chrome. Edge did not work either.

[WebMechanic]

Same in FF Dev (Win10). Vue 3.2.31, Vue Devtool v6.1.4. Reopening FF DevTools doesn't necessarily solve it.
Need to visit FF's DevTools Settings and check Vue Extension on/off to remain active for the current Tab, but may break again if another/new tab is opened that has a Vue app.

[tenaciouspete]

c888003 Thank you!

Where do I add this code?

Sorry for the dumb question, I'm only in my first year of Uni

[kyanmichael]

@Akryum: Your c888003 commit is a great improvement, thank you! 🎉

However, I think an additional fix is needed.  I'm noticing that while Nuxt v2 is in the process of initialising, the window.__NUXT__ context gets defined before the window.$nuxt helper:

• So there's a period of time when window.__NUXT__ is defined but window.$nuxt isn't.
• This causes nuxtDetected to become true before window.$nuxt is defined.
• Therefore, this conditional code doesn't execute, and so the Vue variable remains undefined.
• Therefore, devtoolsEnabled is set to undefined for Vue v2 ❌ and the runDetect() function returns (it doesn't wait until window.$nuxt becomes defined).

I've found that making this change to runDetect() fixes the issue, since nuxtDetected will now only become true once both window.__NUXT__ and window.$nuxt have been defined: ✅

  // Method 1: Check Nuxt.js
- const nuxtDetected = !!(window.__NUXT__ || window.$nuxt)
+ const nuxtDetected = !!(window.__NUXT__ && window.$nuxt)

• Vue — v2.7.8
• Nuxt — v2.15.8
• Chrome — v107.0.5304.110
• Vue Devtools Extension — v6.4.5

[annouos]

and meeeee ,,, but i'm using:
Opera 120.0.6099.200
Nuxt 3.9.1