DevTools guard for jsdom could be improved

[tkalmar]

i recently stumbled upon
https://github.com/vuejs/core/blame/623bfb29a23c36bf935e7faefa64d1baa69d465c/packages/runtime-core/src/devtools.ts#L67
after switching my vitest environment from jsdom to happy-dom.
Wouldn't it be better if devtools get disabled if NODE_ENV=== 'test'? Only testing for jsdom there is very specific and what happens if jsdom replaces the user-agent? or someone mocks the user-agent with ohter strings? I personally find this very fragile.

[krishkhinchi]

Hi @tkalmar,

Good catch. You’re right that relying on a jsdom-specific user-agent check is quite fragile and environment-dependent. Disabling devtools based on NODE_ENV === "test" would be a more robust and explicit signal, especially now that alternatives like happy-dom are common and user-agent strings can be spoofed or changed.

A possible middle ground could be:

• Prefer NODE_ENV === "test" (or a similar explicit flag) to disable devtools by default in test environments.
• Keep the jsdom check only as a fallback for legacy cases.

This would make the behavior more predictable and less coupled to a specific DOM implementation.

---

If this addresses your concern, please mark this as answered. If not, let me know what part you’d like to dig into further.

[tkalmar]

Thanks for the feedaback!
Workaround which worked for me was:

beforeEach(() => {
  // disable hook registration of vue devtools as it would add an setTimeoutSpy call
  (globalThis as any).__VUE_DEVTOOLS_GLOBAL_HOOK__ = {
    emit: vi.fn(),
  };
});

[aniruddhaadak80]

Hi @tkalmar!

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!