Javascript is required
1 min read

Vue Tip: Force-Enable Vue Devtools in Production Build

Vue Tip: Force-Enable Vue Devtools in Production Build Image

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:

Vue Devtools disabled in production

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:

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__:

Vue Devtools instance

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
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:

Vue Devtools enabled in production


If you don't want to do this on your own, check the "Vue force dev" Chrome extension


If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.