How to Enable Vue Devtools in Production Environments

In daily development, Vue components work smoothly locally, but issues often appear in production where data display or styles are incorrect and hard to reproduce.

As experienced Vue developers, the natural solution is to use vue devtools , but the challenge is enabling it in a live environment.

Direction

We consider using vue devtools and need a way to activate it on the production site.

Case Demonstration

Using the Element‑UI website as an example, the Chrome DevTools initially lacks a Vue tab.

Magic Code

Open the console and run the following script to enable Vue Devtools:

var Vue, walker, node;
walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  if (node.__vue__) {
    Vue = node.__vue__.$options._base;
    if (!Vue.config.devtools) {
      Vue.config.devtools = true;
      if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
        window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}

The console will display vue devtools now is enabled , confirming successful activation.

Function Verification

After refreshing Chrome DevTools, a new Vue tab appears, providing the same debugging capabilities as in the local environment, which is extremely useful for troubleshooting production Vue issues.

Vue 3 Adaptation

The same approach works with Vue 3. The following code adapts the method for a Vue 3 application (e.g., using the vben admin template):

const el = document.querySelector('#app')
const vm = el.__vue_app__
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.push({
    app: vm,
    version: vm.version,
    types: {
      Comment: Symbol("Comment"),
      Fragment: Symbol("Fragment"),
      Static: Symbol("Static"),
      Text: Symbol("Text"),
    },
})
if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", vm);
    console.log("==> vue devtools now is enabled");
}

Conclusion

This guide focuses on practical steps rather than deep theory, offering a free method to enable Vue Devtools in production for both Vue 2 and Vue 3 applications.

Thank you for reading; feel free to provide feedback or show support.