Forcing Vue.js devtools extension to work in production mode on any website
TLDR: Here is what you're looking for https://chrome.google.com/webstore/detail/vue-force-dev/oohfffedbkbjnbpbbedapppafmlnccmb
Any frontend developer these days working with the Vue.js framework is (or should be) familiar with its closest ecosystem. It includes many useful libraries and tools such as Vue.js devtools extension for browsers.
It helps you with inspecting and debugging your components, Vuex store, emitted events, and others on the localhost. Since all modern Javascript web applications are bundled, minified, or altered before being shipped to the production environment, your ability to use this useful extension usually ends with this phrase: “Vue.js is detected… but inspection is not available.”
Here comes into play a very simple and still clever solution by @hzmming wrapped into Chrome extension below.
In a few words, it tries to detect Vue.js on any loaded page utilizing the overloading of standard built-in method “Object.defineProperty” while checking all related signs of the main Vue object such as $on, $watch, $emit, $forceUpdate, etc. defined on it.
When the “config” property is found, extension overwrites its children's props to suit our needs.
Vue.config.devtools = true;
Vue.config.productionTip = true;That's it. You can now inspect any website developed with Vue.js.
If you don't like to use 3rd party browser extensions, even more by an “anonymous” developer, due to security or other reasons you can still help yourself with classic javascript breakpoint set on the initialization line of Vue.js code and change values manually, as this blog post suggests.
FYI the code is open-sourced and can be found here, hope you'll be sleeping better then.
This article was written mainly because I really appreciate the daily use of this extension. So I wanted to gather more credit and public awareness to such a handy tool that is not yet broadly spread across the Vue community.
