The official debugging tool vue-devTools has been a great help to vue. js developers for a long time. Currently, the official Chrome, FireFox and Electron versions are available. But the Electron version is available only on Safari and mobile, and the installation and debugging process is cumbersome.

The vConsole plug-in introduced today largely addresses the need for debugging on mobile, as shown in the picture above. VConsole is an open source debugging tool provided by wechat team. If you have developed small programs, you should be familiar with it. VConsole provides plug-in capability, so vue-vconsole-DevTools was born.

Installation and use:

npm i -s vconsole
npm i -s vue-vconsole-devtools
Copy the code

Introduced in the Vue project entry file

import VConsole from "vconsole";
import Devtools from 'vue-vconsole-devtools'
Devtools.initPlugin(new VConsole()); // Note that it needs to be introduced before creating the Vue instance
Copy the code

Only introduced in development mode

Reduce packaging volume in production environment

const app = new Vue({
 render: (h) = > h(App),

// Called after the instance is created, using webPack's asynchronous module loading capabilities
if(process.env.NODE_ENV === "development") {Promise.all([import("vconsole"), import("vue-vconsole-devtools")]).then(
   (res) = > {
     if (res.length === 2) {
       // The root instance constructor needs to be assigned to __vue_devtools_global_hook__.vue
       window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor;
       const VConsole = res[0].default;
       const Devtools = res[1].default;
       Devtools.initPlugin(newVConsole()); }}); }Copy the code


Project address if you can help, thank star!

Recommended reading

Automatically manage the keep-alive page