Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Force-Enable Vue Devtools in Production Build

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Nov 29, 2022
1 min read
|
74 views
Devtools
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:

const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__devtools.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:

const Vue = Object.getPrototypeOf(app).constructorwhile (Vue.super) {  Vue = Vue.super}Vue.config.devtools = truedevtools.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

Info

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 Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.