Debug H5 page -vconsole

vConsole It's a light weight 、 Scalable 、 Debugging panel for front-end developers of mobile web pages .

git Address ：https://github.com/Tencent/vConsole

The demo case ：http://wechatfe.github.io/vconsole/demo.html

characteristic

• see console journal
• View network requests
• view pages element structure
• see Cookies、localStorage and SessionStorage
• Do it manually JS Command line
• Custom plug in

Use

stay html Page in , For multiple pages, it is necessary to introduce

 1、cdn：

<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
      var vConsole = new VConsole();
      console.log("hello world"); 
</script>

2、npm：

npm install vconsole

Import dist/vconsole.min.js to your project（node_modules The position in is vconsole Under the dist Catalog ）

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

For TypeScript users:

import 'path/to/vconsole.min.d.ts';

3、 Modular introduction import / require etc.

import VConsole from 'vconsole'
const vConsole = new VConsole()

4、webpack plugin

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

stay webpack Configuration in profile ：

//  Introducing plug-ins 
var vConsolePlugin = require('vconsole-webpack-plugin'); 
 
module.exports = {
    ...
 
    plugins: [
        new vConsolePlugin({
            filter: [],  //  Entry file to be filtered 
            enable: true //  Remember to change back to before publishing the code  false, Set in development mode true
        }),
        ...
    ]
    ...
}

Be careful ： The debug mode user will see the panel , For development environments only , Do not introduce... Into the production environment  vConsole  modular .

 

Support 5 There are different types of logs , It will be output to the front panel in different colors ：

	console.log("hello world"); // Black characters on white background 
	console.info("hello world"); // Purple characters on white background 
	console.debug("hello world"); // Yellow on a white background 
	console.warn("hello world"); // Yellow characters on yellow background 
	console.error("hello world"); // The scarlet letter on a red background 

introduce  vConsole  After module , The front of the page will appear in the lower right corner  vConsole  Hover button , Expandable / Fold up the panel ：

Expand the panel as follows ：

 

       

Public properties and methods

// At present  vConsole  Version number of .
vConsole.version
// Show  vConsole  Main panel 
vConsole.show()
// hide  vConsole  Main panel 
vConsole.hide()
// Destruct a  vConsole  Object instances , And will  vConsole  Remove panel from page .
var vConsole = new VConsole();
vConsole.destroy();
// Show  vConsole  On / off button of .
vConsole.showSwitch()
// hide  vConsole  On / off button of 
vConsole.hideSwitch()