The console event is fired whenever console methods are called in the playground result page.
Event Payload
The event callback receives an object with the following structure:
The console method that was called (e.g., "log", "error", "warn", "info", "table", etc.)
An array of arguments that were passed to the console method
When It Fires
The event fires whenever any console method is called in the result page, including:
console.log()console.error()console.warn()console.info()console.table()console.debug()- Other console methods
Usage Example
import { createPlayground } from "livecodes";
createPlayground("#container").then((playground) => {
// Listen for console output
const consoleWatcher = playground.watch("console", ({ method, args }) => {
// Mirror console output to parent page
console[method](...args);
});
// Later, remove the watcher
// consoleWatcher.remove();
});
Common Use Cases
Mirror Console Output
playground.watch("console", ({ method, args }) => {
// Display playground console output in the parent page console
if (typeof console[method] === "function") {
console[method]("[Playground]", ...args);
}
});
Custom Console Display
const consoleElement = document.querySelector("#custom-console");
playground.watch("console", ({ method, args }) => {
const logEntry = document.createElement("div");
logEntry.className = `console-entry console-${method}`;
// Format the arguments
const formattedArgs = args.map(arg => {
if (typeof arg === "object") {
return JSON.stringify(arg, null, 2);
}
return String(arg);
}).join(" ");
logEntry.textContent = `[${method.toUpperCase()}] ${formattedArgs}`;
consoleElement.appendChild(logEntry);
// Auto-scroll to bottom
consoleElement.scrollTop = consoleElement.scrollHeight;
});
Filter Console Messages
playground.watch("console", ({ method, args }) => {
// Only show errors and warnings
if (method === "error" || method === "warn") {
console[method]("Playground:", ...args);
}
});
Log Console Activity
const consoleLog = [];
playground.watch("console", ({ method, args }) => {
consoleLog.push({
timestamp: new Date(),
method: method,
args: args,
});
console.log(`Console activity: ${consoleLog.length} messages`);
});
// Later, export or analyze the log
function exportConsoleLog() {
return JSON.stringify(consoleLog, null, 2);
}
Count Console Calls
const consoleCounts = {};
playground.watch("console", ({ method }) => {
consoleCounts[method] = (consoleCounts[method] || 0) + 1;
console.log("Console usage:", consoleCounts);
});
Detect Errors
playground.watch("console", ({ method, args }) => {
if (method === "error") {
// Show error notification
showNotification({
type: "error",
message: args.join(" "),
});
// Log to error tracking service
trackError({
source: "playground",
error: args[0],
});
}
});
playground.watch("console", ({ method, args }) => {
if (method === "table" && args.length > 0) {
console.log("Table data from playground:");
console.table(args[0]);
}
});
Capture and Display Logs
const MAX_LOGS = 100;
const logs = [];
playground.watch("console", ({ method, args }) => {
logs.push({ method, args, time: Date.now() });
// Keep only last 100 logs
if (logs.length > MAX_LOGS) {
logs.shift();
}
// Update UI
updateConsoleUI(logs);
});
function updateConsoleUI(logs) {
const container = document.querySelector("#console-output");
container.innerHTML = logs.map(log => {
const time = new Date(log.time).toLocaleTimeString();
const args = log.args.map(a => String(a)).join(" ");
return `<div class="log-${log.method}">[${time}] ${args}</div>`;
}).join("");
}
playground.watch("console", ({ method, args }) => {
// Detect performance.now() or timing logs
const message = args.join(" ");
if (message.includes("ms") || message.includes("time")) {
console.log("Performance log detected:", message);
}
});
Implement Console Filters
const filters = {
level: "all", // "all", "error", "warn", "info", "log"
search: "",
};
playground.watch("console", ({ method, args }) => {
// Filter by level
if (filters.level !== "all" && method !== filters.level) {
return;
}
// Filter by search term
if (filters.search) {
const text = args.join(" ").toLowerCase();
if (!text.includes(filters.search.toLowerCase())) {
return;
}
}
// Display filtered message
console[method](...args);
});
Removing the Watcher
const watcher = playground.watch("console", ({ method, args }) => {
console.log("Console:", method, args);
});
// Stop watching for console output
watcher.remove();