194 lines
6.0 KiB
HTML
194 lines
6.0 KiB
HTML
<!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">
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<title>Test: Log</title>
|
|
<link href="../example/lib/weui.min.css" rel="stylesheet"/>
|
|
<link href="../example/lib/demo.css" rel="stylesheet"/>
|
|
|
|
<!-- <script type="module" src="../dist/vconsole.min.js"></script> -->
|
|
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
|
|
</head>
|
|
<body ontouchstart>
|
|
<div id="page" 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="promiseReject()" href="javascript:;" class="weui_btn weui_btn_default">promiseReject</a>
|
|
<a onclick="xssLog()" href="javascript:;" class="weui_btn weui_btn_default">XSS: Log</a>
|
|
<a onclick="xssStorage()" href="javascript:;" class="weui_btn weui_btn_default">XSS: Storage</a>
|
|
<a onclick="changeTheme('dark')" href="javascript:;" class="weui_btn weui_btn_default">Theme:dark</a>
|
|
<a onclick="changeTheme('light')" href="javascript:;" class="weui_btn weui_btn_default">Theme:light</a>
|
|
<a onclick="changeTheme('')" href="javascript:;" class="weui_btn weui_btn_default">Theme:auto</a>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script type="module">
|
|
import '../dist/vconsole.min.js';
|
|
|
|
window.vConsole = new window.VConsole({
|
|
maxLogNumber: 1000,
|
|
// disableLogScrolling: true,
|
|
// theme: 'dark',
|
|
onReady: function() {
|
|
console.log('vConsole is ready.');
|
|
},
|
|
onClearLog: function() {
|
|
console.log('on clearLog');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// setInterval(() => {
|
|
// console.log(Math.random());
|
|
// console.log('[system]', Math.random());
|
|
// }, 300);
|
|
|
|
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 a = {a: {b: 1}};
|
|
var count = 0;
|
|
var timer = setInterval(() => {
|
|
count ++;
|
|
console.log('repeat', 'foo bar', function(){});
|
|
if (count >= 10) {
|
|
clearInterval(timer);
|
|
|
|
console.log('repeat', a);
|
|
console.log('repeat', a);
|
|
console.log('repeatLog() End');
|
|
}
|
|
}, 50);
|
|
}
|
|
|
|
function windowError() {
|
|
console.info('windowError() Start');
|
|
console.log(Error);
|
|
a.b = 1;
|
|
console.info('windowError() End');
|
|
}
|
|
|
|
function promiseReject() {
|
|
console.info('promiseReject() Start');
|
|
Promise.reject('reject string');
|
|
Promise.reject(new Error('reject an Error'));
|
|
Promise.reject({message: 'reject an object'});
|
|
Promise.reject(666).then((result) => {
|
|
console.log('resolved', result);
|
|
}, (result) => {
|
|
console.log('rejected', result);
|
|
});
|
|
setTimeout(() => {
|
|
console.info('promiseReject() End');
|
|
}, 0)
|
|
}
|
|
|
|
function xssLog() {
|
|
console.info('xssLog() Start');
|
|
const arr = [
|
|
"-->\tyo\n'\"/><iframe>",
|
|
["-->\tyo\n'\"/><iframe>"]
|
|
];
|
|
const obj = {
|
|
'key': 'foo\nbar\tyoo',
|
|
"-->\tyo\n'\"/><iframe>": "-->\n'\"/><iframe>"
|
|
};
|
|
console.log('XSS str:', "-->\tyo\n'\"/><iframe>");
|
|
console.log(arr);
|
|
console.log(obj);
|
|
console.info('xssLog() End');
|
|
}
|
|
|
|
function xssStorage() {
|
|
console.info('xssStorage() Start');
|
|
localStorage.setItem("-->\tyo\n'\"/><iframe>", "-->\tyo\n'\"/><iframe>");
|
|
sessionStorage.setItem("-->\tyo\n'\"/><iframe>", "-->\tyo\n'\"/><iframe>");
|
|
document.cookie = "foo=-->\tyo";
|
|
console.info('xssStorage() End');
|
|
}
|
|
|
|
function changeTheme(theme) {
|
|
console.info('changeTheme() Start');
|
|
window.vConsole.setOption('theme', theme);
|
|
console.log('Current Theme:', theme || 'auto');
|
|
console.info('changeTheme() End');
|
|
}
|
|
</script> |