Option to override Vue.config.devtools

[AndreKR]

What problem does this feature solve?

When the Vue application sets Vue.config.devtools = false (which is the default for production builds), the Vue devtools browser extension just shows this message and the Vue tab doesn't show up in the Chrome devtools:

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

It is unclear what is to be gained from this behavior. The config option can be overridden pretty easily by setting a breakpoint and overwriting the config option before Vue loads, but that takes a minute and is annoying.

To make the override easier, I propose adding a config option directly in the Vue devtools settings to ignore Vue.config.devtools and act like it was set to true.

[iChenLei]

👓 Look through the vue devtools source code, you can hack confg via browser console.

For Normal Vue App

// Step 1
window.postMessage({ devtoolsEnabled: true, vueDetected: true, nuxtDetected: true });

// Step 2 
// open chrome devtools , right click on vue root dom element, confirm **Store as global variable**
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = temp1.__Vue__.constructor

// Step 3
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue.config.devtools = true;

// Step 4
// Now  you can use Vue devtools to debug vue app;

For Nuxt App

// Step 1
window.postMessage({ devtoolsEnabled: true, vueDetected: true, nuxtDetected: true });

// Step 2 
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = window.$nuxt.$root.constructor

// Step 3
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue.config.devtools = true;

// Step 4
// Now  you can use Vue devtools to debug Nuxt app;

! After run these hack code in browser terminal 
! please close browser devtools panel, and open again, It's work.

For Vue 3 App

 // packages/shell-chrome/src/detector.js L31-L41
// Method 2: Check  Vue 3
const vueDetected = !!(window.__VUE__)
if (vueDetected) {
  win.postMessage({
    // TODO disable devtools
    devtoolsEnabled: true,
    vueDetected: true
  }, '*')
  return
}

Vue 3 Devtools Logic Change

// packages/vue/src/dev.ts
import { setDevtoolsHook, initCustomFormatter } from '@vue/runtime-dom'
import { getGlobalThis } from '@vue/shared'
export function initDev() {
  const target = getGlobalThis()
  target.__VUE__ = true
  setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__)
  if (__BROWSER__) {
    if (!__ESM_BUNDLER__) {
      console.info(
        `You are running a development build of Vue.\n` +
          `Make sure to use the production build (*.prod.js) when deploying for production.`
      )
    }
    initCustomFormatter()
  }
}

Vue Devtools can't manipulate Vue3 (composition api) as same as Vue2, Need Vue3 do more work self. Vue2 flow: devtools -> catch Vue Global Magic Object -> do everything Vue3 flow: Vue Runtime setDevtoolsHook -> window object -> devtools catch __VUE__ magic variable. -> do everything So If App author deploy a production Vue3 App, You have no idea to open the Vue devtools, Beacuse devtools can't work!

Summary

1. Vue2 you can hack, Vue 3 you can't
2. I don't think add a override options for vue devtools is a good idea, If we need add this feature, why not just remove the disable limit like React Devtools?

[AndreKR]

I don't think add a override options for vue devtools is a good idea, If we need add this feature, why not just remove the disable limit like React Devtools?

Exactly my point, I see no benefit to disabling the Devtool in production builds, if it doesn't save any code size or performance.

I just thought because someone obviously programmed that feature in on purpose, a config option to override it seemed more appropriate than just removing that feature again. But yes, if it was my choice, I'd simply remove the restriction.

[fguisso]

I see no benefit to disabling the Devtool in production builds if it doesn't save any code size or performance.

Is there or could there be any performance gain using the actual method?

[AndreKR]

@fguisso No, because you can re-enable it anytime at runtime. The limitation in the Devtools is purely an artificial check.

[Akryum]

Exactly my point, I see no benefit to disabling the Devtool in production builds, if it doesn't save any code size or performance.

It is actually saving size and performance for Vue 3, as be strip out all the devtools related code by default in the production builds (with build flags).

Here is an example of code that will be tree-shaken out of Vue 3:

https://github.com/vuejs/vue-next/blob/a5a66c5196f5e00e8cbf7f6008d350d6eabcee71/packages/runtime-core/src/apiCreateApp.ts#L301-L304