Force enable Vue.js devtools in production mode.

#vue #devtools #javascript #webpack

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:

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

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.
 */

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

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:

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: