Vue Tip: Force-Enable Vue Devtools in Production Build

Often we cannot reproduce a bug in the development environment and need to debug it in production.

Unfortunately, in most cases, the Vue Devtools browser extension is disabled in production builds:

Luckily, there is a way to force-enable it in production builds.

Open Console in Browser DevTools

First, we need to open the console in your browser's DevTools:

Windows or Linux: Ctrl+Shift+J

Mac: Cmd+Option+J

Access Vue App Instance

Now we need to get access to the Vue app instance:

If you are using Vue 2 you need to call:

const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue__).__vue__

For Vue 3, you need to run the following code in the console.

const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue_app__).__vue_app__

The app variable contains a reference to the Vue app instance:

We can now store the app version in a new variable called version:

const version = app.version

Access Vue Devtools Instance

In the next step, we need access to the Vue Devtools instance which is available via window.__VUE_DEVTOOLS_GLOBAL_HOOK__:

We store it in a variable called devtools and set its property enabled to true:

1const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
2devtools.enabled = true

Finally, we need to re-initialize the Vue app instance. For Vue 3, you need to run:

devtools.emit('app:init', app, version, {})

For Vue 2, run the following code:

1const Vue = Object.getPrototypeOf(app).constructor
2while (Vue.super) {
3  Vue = Vue.super
4}
5Vue.config.devtools = true
6devtools.emit('init', Vue)

The last step is to refresh the browser DevTools to be able to detect the changes on the Vue app instance:

Windows or Linux: Alt+R

Mac: Option+R

Now the Vue Devtools extension is enabled in the production build:

Video