The Problem

Vue DevTools is an essential debugging tool, but it often does not connect to production builds. This makes debugging production issues extremely difficult.

Symptoms

  • Vue DevTools extension shows "Vue.js not detected"
  • DevTools panel is empty or shows a blank screen
  • Works in development but not production
  • DevTools icon stays gray instead of turning green

Root Causes

Cause 1: Devtools Disabled in Production

```javascript // main.js const app = createApp(App);

// In production builds, devtools are disabled by default app.config.devtools = false; // Default for production ```

Cause 2: Production Build Strips Devtools Code

When building with NODE_ENV=production, Vue's production build removes devtools-related code entirely for performance.

Cause 3: Browser Extension Version Mismatch

bash
Vue DevTools v6.x does not support Vue 2.x
Vue DevTools v7.x is required for Vue 3.x

How to Fix It

Fix 1: Enable Devtools in Development

```javascript // main.js const app = createApp(App);

if (import.meta.env.DEV) { app.config.devtools = true; app.config.performance = true; // Enables performance tracking }

app.mount('#app'); ```

Fix 2: Enable Devtools in Production (For Debugging)

javascript
// main.js (temporary for debugging)
const app = createApp(App);
app.config.devtools = true;
app.mount('#app');

Also ensure your build is not set to production mode:

```bash # For Vite npx vite build --mode development

# For Vue CLI npm run serve # Development server has devtools ```

Fix 3: Use Vue DevTools Standalone

bash
npm install -g @vue/devtools
vue-devtools

Then connect your app:

javascript
import { devtools } from '@vue/devtools'
devtools.connect('http://localhost', 8098)

Fix 4: Check Build Configuration

javascript
// vite.config.js
export default defineConfig({
  plugins: [vue()],
  define: {
    __VUE_PROD_DEVTOOLS__: true  // Enable devtools in production build
  }
});

Fix 5: Verify DevTools Extension

  1. 1.Open Chrome DevTools (F12)
  2. 2.Go to Extensions tab
  3. 3.Ensure Vue.js devtools is enabled
  4. 4.Check that the Vue version matches the devtools version
  5. 5.Try incognito mode with only Vue devtools enabled

For Production Debugging

javascript
// Add runtime logging as an alternative to devtools
if (import.meta.env.VITE_DEBUG) {
  app.config.warnHandler = (msg, instance, trace) => {
    console.warn(`[Vue Warn]`, msg, trace);
  };
}