Embedded H5 debugging artifact vconsole

Time:2021-11-29

vConsole

A lightweight, expandable front-end developer debugging panel for mobile web pages, which can be used for H5 embedded in app and other places for H5 debugging.

use

Method 1: CDN was introduced
//Introduce


  //Initialization
  var vConsole = new VConsole();
  console.log('Hello world');


Method 2: NPM was introduced
npm install vconsole

import Vconsole from 'vconsole'
//Vue global call
If (test environment){
  const vConsole = new Vconsole()
  Vue.use(vConsole)
}

Print

After loading vconsole, the log will be printed to the front end of vconsole + native console at the same time.

//It can be consistent with the native. It supports various native attributes: info, error, etc
console.log('Hello World');

method

//The version number of the current vconsole.
vConsole.version
//Displays the vconsole main panel
vConsole.show()
//Hide vconsole main panel
vConsole.hide()
//Destruct a vconsole object instance and remove the vconsole panel from the page.
var vConsole = new VConsole();
vConsole.destroy();
//Displays the switch button of vconsole.
vConsole.showSwitch()
//Hide the switch button of vconsole
vConsole.hideSwitch()
...

afterword

The above contents can easily complete the basic debugging requirements of H5. If there are in-depth requirements, it is recommended to read the documents in detail.
Gitee | Tencent open source vconsole
GitHub Tencent open source vconsole

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]