Moment For Technology

Vconsole usage configuration

Posted on Aug. 8, 2022, 7:20 p.m. by Michele Bennett
Category: The development tools Tag: The front end


Mobile debugging tool to help developers debug on the mobile terminal


The introduction ofWechatfe. Making. IO/vconsole/li...

script src=" Var vConsole = new vConsole (); v=3.2.0"/script script console.log('Hello world'); /scriptCopy the code

Vconsole webpack - plugin plug-in


Vconsole-webpack-plugin is a Webpack plug-in packaged on the basis of vConsole. You can automatically add vConsole debugging functions through webPack configuration


npm install vconsole-webpack-plugin --save-dev


As a debugging module, you need to comment out the code before releasing it. To avoid human error, you are advised to configure it as follows:

Package. json file configuration:

scripts: {
  "dev": "webpack -w --debug",
  "prod": "webpack -p"
Copy the code

Webpack. Conf. Js configuration:

Var vConsolePlugin = require('vconsole-webpack-plugin'); Const argv = require('yargs').describe('debug', 'debug environment ') // use 'webpack --debug'.argv; Module.exports = {plugins: [new vConsolePlugin({filter: [], // need to filter the entry file enable:!! Argv. debug // whether to enable}),]}Copy the code


The usage is the same as above, but don't forget to add --debug when starting the script

// package.json

"scripts": {
  "start:dev": "webpack-dev-server --debug",
Copy the code

Window.vconsole = new window.vconsole (); window.vconsole ();

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.