log.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  6. <title>Test: Log</title>
  7. <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  8. <link href="../example/lib/demo.css" rel="stylesheet"/>
  9. <script src="../example/lib/zepto.min.js"></script>
  10. <script src="../example/lib/zepto.touch.min.js"></script>
  11. <script src="../dist/vconsole.min.js"></script>
  12. </head>
  13. <body ontouchstart>
  14. <div class="page">
  15. <a onclick="formattedLog()" href="javascript:;" class="weui_btn weui_btn_default">formattedLog</a>
  16. <a onclick="styledLog()" href="javascript:;" class="weui_btn weui_btn_default">styledLog</a>
  17. <a onclick="normalObject()" href="javascript:;" class="weui_btn weui_btn_default">normalObject</a>
  18. <a onclick="circularObject()" href="javascript:;" class="weui_btn weui_btn_default">circularObject</a>
  19. <a onclick="circularArray()" href="javascript:;" class="weui_btn weui_btn_default">circularArray</a>
  20. <a onclick="largeObject()" href="javascript:;" class="weui_btn weui_btn_default">largeObject</a>
  21. <a onclick="smallArray()" href="javascript:;" class="weui_btn weui_btn_default">smallArray</a>
  22. <a onclick="repeatLog()" href="javascript:;" class="weui_btn weui_btn_default">repeatLog</a>
  23. <a onclick="windowError()" href="javascript:;" class="weui_btn weui_btn_default">window.error</a>
  24. </div>
  25. </body>
  26. </html>
  27. <script>
  28. window.vConsole = new window.VConsole({
  29. maxLogNumber: 1000,
  30. // disableLogScrolling: true,
  31. onReady: function() {
  32. console.log('vConsole is ready.');
  33. },
  34. onClearLog: function() {
  35. console.log('on clearLog');
  36. }
  37. });
  38. function formattedLog() {
  39. console.info('formattedLog() Start');
  40. console.log('[default]', 'This log should be shown in Log tab.');
  41. console.log('[default]', 'Switch to System tab to see next log.');
  42. console.log('[system]', 'This log should be shown in System tab.');
  43. console.log('[foobar]', 'This log should be shown in Log tab.');
  44. console.info('formattedLog() End');
  45. }
  46. function styledLog() {
  47. console.info('styledLog() Start');
  48. console.log('%c red %c blue %c log.', 'color:red', 'color:blue', 'font-weight:bold', 'Use %c format.');
  49. console.info('styledLog() End');
  50. }
  51. function normalObject() {
  52. console.info('normalObject() Start');
  53. console.log('A normal JSON:', {
  54. number: 233,
  55. string: 'Hello world',
  56. boolean: true,
  57. obj: {foo: 'bar'},
  58. array: [8, 7, 6],
  59. func: function(a) { alert('b'); }
  60. });
  61. console.info('normalObject() End');
  62. }
  63. function circularArray() {
  64. console.info('circularArray() Start');
  65. var arr = [];
  66. arr[0] = 'foo';
  67. arr[1] = arr;
  68. console.log('A circular structure array:', arr);
  69. console.info('circularArray() End');
  70. }
  71. function circularObject() {
  72. console.info('circularArray() Start');
  73. var obj = {
  74. foo: 'bar'
  75. };
  76. obj.self = obj;
  77. obj.next = {};
  78. obj.next.next = obj.next;
  79. obj.next.self = obj;
  80. console.log('A circular structure JSON:', obj);
  81. console.info('circularObject() End');
  82. }
  83. function largeObject() {
  84. console.info('largeObject() Start');
  85. var obj = {},
  86. max = 500;
  87. for (var i=1; i<=max; i++) {
  88. obj[ 'key_' + i ] = Math.random();
  89. }
  90. console.log(max + ' keys:', obj);
  91. console.info('largeObject() End');
  92. }
  93. function smallArray() {
  94. console.info('smallArray() Start');
  95. var arr = [0,1,2,3,4,5,6,7,8,9,10,11];
  96. console.log(arr);
  97. console.info('smallArray() End');
  98. }
  99. function repeatLog() {
  100. console.log('repeatLog() Start');
  101. var count = 0;
  102. var timer = setInterval(() => {
  103. count ++;
  104. console.log('repeat', 'foo bar');
  105. if (count >= 100) {
  106. clearInterval(timer);
  107. console.log('repeatLog() End');
  108. }
  109. }, 50);
  110. }
  111. function windowError() {
  112. console.info('windowError() Start');
  113. a.b = 1;
  114. console.info('windowError() End');
  115. }
  116. </script>