DEV Community

Cover image for Force enable Vue.js devtools in production mode.

Posted on • Updated on

Force enable Vue.js devtools in production mode.

TLDR update:
as @hzmming mentioned in comments - there is now a chrome extension "Vue force dev" you can use to automate what I described here.

Every once in a while we need to debug something in production. But with Vue.js deployed with devtools disabled, you'll see the message:
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
Now it's a PITA to debug if you can't reproduce the bug on your dev environment.

But, since "it's just JavaScript" – we can "hack the mainframe" easily. All we have to do is to find where Vue is loaded and overwrite one option:

Vue.config.devtools = true
Enter fullscreen mode Exit fullscreen mode

Most bundlers leave the comments from a source file for licensing purposes, so we can search all files for a specific comment:

 * Vue.js v2.6.11
 * (c) 2014-2019 Evan You
 * Released under the MIT License.
Enter fullscreen mode Exit fullscreen mode

To search through all sources in chrome devtools click on the dots and select search:
chrome devtools search option

No need to copy the exact version, simply searching for "Vue.js" should get you the correct line most of the time. It should look similar to this:
Source code with Vue package

Set a breakpoint on this line and reload the page. If it's all minified and in one line, you'll need to jump to the very end of it with the "step over next function call (F10 / CMD ')". If it's not minified you'll need to set a breakpoint after the whole Vue code block.

Now by looking through the variables in our scope we need to find the Vue object. With Webpack Vue should be inside exports, something like this:

Variables in our scope

In our case, we see that the property exports of the object t is our Vue object.

Now go to the console, and overwrite the devtools option with true:
Setting the devtoops option in console

Our breakpoint can be removed and the runtime resumed - that's it! Just close the developer tools and open again to see our Vue tab available to us!

The solution may vary based on your setup, please comment if you have problems with it and I might add more info to the post.


Top comments (8)

hzmming profile image

you need this "vue force dev",one chrome extension.

valentin9 profile image

Wow Thanks! I wanted to write an extension that dos this automatically and there it is! Awesome!

thaifani profile image
Zaher Thaifani

Thanks very very much

ostap profile image
Ostap Brehin

Thank you very much! It works!

bnaya profile image
Bnaya Peretz

The permissions it requires are very broad

apmyp1990 profile image
apmyp1990 • Edited

Thanks, the extension works fine, but I am missing the Pinia Store. Is it possible to get it too?
I am using Vue3

albirlak profile image

Hi, do you have actual solution for 4.1.1 ?

valentin9 profile image

do you mean for vuex 4? It's the same since it only depends on Vue config, not Vuex. Also see the comment of @hzmming