Vue Tip: Force-Enable Vue Devtools in Production Build

Devtools

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).constructor while (Vue.super) { Vue = Vue.super } Vue.config.devtools = true devtools.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

Video

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:

Vue Tip: Use Provide & Inject to Avoid Prop Drilling

Props are the standard way to pass data from the parent to a child component. Sometimes, we want to share data from a parent component to all its children components without using a store. Provide / Inject solves this problem and avoids prop drilling.

Vue Tip: Dynamically Add & Remove Route While App Is Running

Adding routes to your router is usually done via the `routes` option, but in some situations, you might want to add or remove routes while the application is already running.