zx66
/
nc.963.cn


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>Test: Log</title>
  <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  <link href="../example/lib/demo.css" rel="stylesheet"/>

  <script src="../dist/vconsole.min.js"></script>
</head>
<body ontouchstart>
  <div class="page">
    <a onclick="formattedLog()" href="javascript:;" class="weui_btn weui_btn_default">formattedLog</a>
    <a onclick="styledLog()" href="javascript:;" class="weui_btn weui_btn_default">styledLog</a>
    <a onclick="normalObject()" href="javascript:;" class="weui_btn weui_btn_default">normalObject</a>
    <a onclick="circularObject()" href="javascript:;" class="weui_btn weui_btn_default">circularObject</a>
    <a onclick="circularArray()" href="javascript:;" class="weui_btn weui_btn_default">circularArray</a>
    <a onclick="largeObject()" href="javascript:;" class="weui_btn weui_btn_default">largeObject</a>
    <a onclick="smallArray()" href="javascript:;" class="weui_btn weui_btn_default">smallArray</a>
    <a onclick="repeatLog()" href="javascript:;" class="weui_btn weui_btn_default">repeatLog</a>
    <a onclick="windowError()" href="javascript:;" class="weui_btn weui_btn_default">window.error</a>
    <a onclick="changeTheme()" href="javascript:;" class="weui_btn weui_btn_default">changeTheme</a>
  </div>
</body>
</html>

<script>

window.vConsole = new window.VConsole({

  maxLogNumber: 1000,

  // disableLogScrolling: true,

  onReady: function() {

    console.log('vConsole is ready.');

  },

  onClearLog: function() {

    console.log('on clearLog');

  }

});


function formattedLog() {

  console.info('formattedLog() Start');

  console.log('[default]', 'This log should be shown in Log tab.');

  console.log('[default]', 'Switch to System tab to see next log.');

  console.log('[system]', 'This log should be shown in System tab.');

  console.log('[foobar]', 'This log should be shown in Log tab.');

  console.info('formattedLog() End');

}


function styledLog() {

  console.info('styledLog() Start');

  console.log('%c red %c blue %c log.', 'color:red', 'color:blue', 'font-weight:bold', 'Use %c format.');

  console.info('styledLog() End');

}


function normalObject() {

  console.info('normalObject() Start');

  console.log('A normal JSON:', {

    number: 233,

    string: 'Hello world',

    boolean: true,

    obj: {foo: 'bar'},

    array: [8, 7, 6],

    func: function(a) { alert('b'); }

  });

  console.info('normalObject() End');

}


function circularArray() {

  console.info('circularArray() Start');

  var arr = [];

  arr[0] = 'foo';

  arr[1] = arr;

  console.log('A circular structure array:', arr);

  console.info('circularArray() End');

}


function circularObject() {

  console.info('circularArray() Start');

  var obj = {

    foo: 'bar'

  };

  obj.self = obj;

  obj.next = {};

  obj.next.next = obj.next;

  obj.next.self = obj;

  console.log('A circular structure JSON:', obj);

  console.info('circularObject() End');

}


function largeObject() {

  console.info('largeObject() Start');

  var obj = {},

      max = 500;

  for (var i=1; i<=max; i++) {

    obj[ 'key_' + i ] = Math.random();

  }

  console.log(max + ' keys:', obj);

  console.info('largeObject() End');

}


function smallArray() {

  console.info('smallArray() Start');

  var arr = [0,1,2,3,4,5,6,7,8,9,10,11];

  console.log(arr);

  console.info('smallArray() End');

}


function repeatLog() {

  console.log('repeatLog() Start');

  var count = 0;

  var timer = setInterval(() => {

    count ++;

    console.log('repeat', 'foo bar');

    if (count >= 100) {

      clearInterval(timer);

      console.log('repeatLog() End');

    }

  }, 50);

}


function windowError() {

  console.info('windowError() Start');

  a.b = 1;

  console.info('windowError() End');

}


let theme = 'light';

function changeTheme() {

  console.info('changeTheme() Start');

  theme = theme === 'light' ? 'dark' : 'light';

  window.vConsole.setOption('theme', theme);

  console.log('Current Theme:', theme);

  console.info('changeTheme() End');

}


</script>