Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom page for the Console</title>
</head>
<body>
<script>
// These query parameters are set in damp.js:customConsole and define the number
// of console API calls we do in this test.
const searchParams = new URLSearchParams(location.search);
const sync = searchParams.get("sync");
const stream = searchParams.get("stream");
const batch = searchParams.get("batch");
const batchSize = searchParams.get("batchSize");
// We log complex objects:
// * a complex js object (window)
// * a DOM node (body)
// * a large array
const bigArray = Array.from({length: 10000}, (_, i) => i);
// Fill up the console with many logs synchronously during page load.
for (let i = 0; i < sync; i++) {
console.log("sync log", i, window, document.body, bigArray);
}
// Then, do streamlogs, log asynchronously a lot of messages
let n = 0;
function streamLogs() {
console.log("stream log", n++, window, document.body, bigArray);
if (n < stream) {
requestAnimationFrame(streamLogs);
} else {
requestIdleCallback(batchLogs);
}
}
requestIdleCallback(streamLogs);
// We batch log by small bulk asynchronously slightly more slowly thanks to idle callback
let x = 0;
function batchLogs() {
for (let i = 0; i < batchSize; i++) {
// Alternate between simple logs and trace to trigger more edgecases
if (i % 2 == 0) {
console.log("batch log", (x * batchSize) + i, window, document.body, bigArray);
} else {
console.trace("batch log", (x * batchSize) + i, window, document.body, bigArray);
}
}
if (x < batch - 1) {
requestIdleCallback(batchLogs);
} else {
// We are done logging all messages
console.log("very last message");
}
x++;
}
</script>
</body>
</html>