Don’t blow out your inspiration and your imagination; Don’t be a slave to your model. — Vincent Van Gogh

Open the gold page,nuxtThe icon lit up 🐒Take a look at the treasure trove of how to start the Devtools debugging tool for a Vue project in production.

First, we need to know the startup process of the Vue debugger

How does Vue enable the Devtools plugin?

This is about line 9095 of Vue2 source code:config.devtoolsIs the statement inVueConstructor. The default value in a development environment istrueIn a production environment the default isfalse, means not enabled. Therefore, we can only enable the debugging tool on the development environment.

🕵️ However, if you’re smart enough to realize that Devtools is actually only one critical line of code to start

devtools.emit('init', Vue);
Copy the code

Key code to start the Devtools plug-in

Emit (‘init’, Vue); emit(‘init’, Vue). To enable the Devtools plugin. But there are two unknowns — DevTools and Vue.

How do I get DevTools

I found the devTools global variable in the source code:

Print output. Emit function can be called

How to obtain Vue

Why do you sayVueIs it the x factor? This is because the webpack-packed code, where Vue is shoved into chunk, does not expose global variables. The good news is that every element generated by a Vue component has a back door__vue__, which points to the element’s vUE instance. By reviewing the elements, I found the root element of the nugget home page.”<div id="__nuxt">... </div>“

The root element’s __vue__ points to the same VM instance as our new Vue({… }). $mount (target). So according to the Javascript prototype chain rule, it follows:

If vm = new Vue() exists, then Vue = vm.constructor

Vue gets to 👋.

To solve the

Now you can insert two unknowns into the “equation” and execute. Here is the code that the console will execute:

const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
// The little tips in the console $can replace document.querySelector
// '$('#__nuxt')' is the root node of the mining site. Note that the root node varies from project to project
const Vue = $('#__nuxt').__vue__.constructor;
Copy the code

Then execute in sequence:

/ / this is extra knowledge @ see https://cn.vuejs.org/v2/api/#devtools
Vue.config.devtools = true;

devtools.emit('init', Vue);
Copy the code

After executing, you need to close the console and reopen it to see the Vue debug panel appear.

Reference:

  • Vue api – devtools
  • Vue.js — vuejs/ vuue — GitHu…