Enable Vue DevTools in a Vue application in production

If you are reading this, you are quite in a pickle. You probably need to debug a Vue application in production, but the Vue DevTools are not available. This is what you need to do:

1. Open the Developer Tools in your browser and paste this into the console:

const apps = Array.from(document.querySelectorAll('*')).filter((e) => e.__vue_app__).map(e => e.__vue_app__);
if (apps.length === 0) {
  console.warn('No Vue apps found on this page.');
} else {
  const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
  devtools.enabled = true;
  apps.forEach(app => {
    devtools.emit('app:init', app, app.version, {});
  });
}

2. Reopen the browser’s Developer Tools and you should see that the Vue DevTools tab is now visible.

Acknowledgements: This script is based on the work of Michael Hoffmann. In his blog, he explains how the script works and also provides the adaptation for Vue 2 applications. The script, which I presented above, is able to handle multiple Vue application instances on the same page.

One more thing: This script will log the state of all Pinia stores in the console.

Array.from(document.querySelectorAll('*')).filter((e) => e.__vue_app__).forEach(({ __vue_app__ }) => {
  const pinia = __vue_app__.config.globalProperties.$pinia;
  if (!pinia) return;
  console.log(pinia.state._rawValue);
});