JavaScript console with syntax highlighting, command history, and advanced logging capabilities. The Console tool provides a complete console API implementation with additional features like HTML rendering, filtering, and global error catching.
Standard console methods with enhanced functionality and chaining support.
/**
* Log messages to console
* @param args - Values to log
* @returns Console instance for chaining
*/
log(...args: any[]): ErudaConsole;
/**
* Log error messages
* @param args - Error values to log
* @returns Console instance for chaining
*/
error(...args: any[]): ErudaConsole;
/**
* Log warning messages
* @param args - Warning values to log
* @returns Console instance for chaining
*/
warn(...args: any[]): ErudaConsole;
/**
* Log info messages
* @param args - Info values to log
* @returns Console instance for chaining
*/
info(...args: any[]): ErudaConsole;
/**
* Log debug messages
* @param args - Debug values to log
* @returns Console instance for chaining
*/
debug(...args: any[]): ErudaConsole;Usage Examples:
const console = eruda.get('console');
// Basic logging
console.log('Hello, world!');
console.error('An error occurred');
console.warn('Warning message');
console.info('Information');
// Multiple arguments
console.log('User:', { name: 'Alice', age: 30 }, 'Status:', 'active');
// Chaining
console.log('First message').warn('Second message').error('Third message');Extended console functionality for debugging and profiling.
/**
* Display object properties in a structured format
* @param args - Objects to display
* @returns Console instance for chaining
*/
dir(...args: any[]): ErudaConsole;
/**
* Display data in table format
* @param args - Data to display in table
* @returns Console instance for chaining
*/
table(...args: any[]): ErudaConsole;
/**
* Start timing operation
* @param label - Timer label
* @returns Console instance for chaining
*/
time(label?: string): ErudaConsole;
/**
* Log intermediate timing
* @param label - Timer label
* @returns Console instance for chaining
*/
timeLog(label?: string): ErudaConsole;
/**
* End timing operation
* @param label - Timer label
* @returns Console instance for chaining
*/
timeEnd(label?: string): ErudaConsole;
/**
* Assert condition and log error if false
* @param condition - Condition to test
* @param args - Error message if condition fails
* @returns Console instance for chaining
*/
assert(condition: boolean, ...args: any[]): ErudaConsole;Usage Examples:
const console = eruda.get('console');
// Display object structure
console.dir(document.body);
console.dir({ user: { name: 'Bob', settings: { theme: 'dark' } } });
// Table display
console.table([
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 25 },
{ name: 'Charlie', age: 35 }
]);
// Timing
console.time('operation');
// ... some code ...
console.timeLog('operation'); // Intermediate timing
// ... more code ...
console.timeEnd('operation');
// Assertions
console.assert(user.age >= 18, 'User must be 18 or older');
console.assert(data.length > 0, 'Data array cannot be empty');Console methods for organizing output and counting occurrences.
/**
* Start message group
* @param args - Group label and content
* @returns Console instance for chaining
*/
group(...args: any[]): ErudaConsole;
/**
* Start collapsed message group
* @param args - Group label and content
* @returns Console instance for chaining
*/
groupCollapsed(...args: any[]): ErudaConsole;
/**
* End current message group
* @returns Console instance for chaining
*/
groupEnd(): ErudaConsole;
/**
* Count occurrences of label
* @param label - Counter label
* @returns Console instance for chaining
*/
count(label?: string): ErudaConsole;
/**
* Reset counter for label
* @param label - Counter label to reset
* @returns Console instance for chaining
*/
countReset(label?: string): ErudaConsole;
/**
* Clear console output
* @returns Console instance for chaining
*/
clear(): ErudaConsole;Usage Examples:
const console = eruda.get('console');
// Grouping
console.group('User Processing');
console.log('Processing user data...');
console.warn('User validation failed');
console.groupEnd();
console.groupCollapsed('Debug Info');
console.log('Debug details here...');
console.groupEnd();
// Counting
console.count('API calls'); // API calls: 1
console.count('API calls'); // API calls: 2
console.count('errors'); // errors: 1
console.countReset('API calls');
console.count('API calls'); // API calls: 1
// Clear console
console.clear();Eruda-specific console enhancements for better debugging experience.
/**
* Display HTML content in console
* @param htmlStr - HTML string to render
* @returns Console instance for chaining
*/
html(htmlStr: string): ErudaConsole;
/**
* Set log filter for console output
* @param filter - Filter pattern (string, RegExp, or function)
*/
filter(filter: string | RegExp | ((log: Log) => boolean)): void;
/**
* Override browser console methods
*/
overrideConsole(): void;
/**
* Restore original console methods
*/
restoreConsole(): void;
/**
* Set global variable in console scope
* @param name - Variable name
* @param val - Variable value
*/
setGlobal(name: string, val: any): void;
/**
* Start catching global errors
*/
catchGlobalErr(): void;
/**
* Stop catching global errors
*/
ignoreGlobalErr(): void;
interface Log {
type: string;
}Usage Examples:
const console = eruda.get('console');
// HTML rendering
console.html('<h3>Debug Report</h3><p>Status: <strong>OK</strong></p>');
console.html('<ul><li>Item 1</li><li>Item 2</li></ul>');
// Filtering
console.filter('error'); // Show only messages containing 'error'
console.filter(/warning|error/i); // RegExp filter
console.filter((log) => log.type === 'error'); // Function filter
console.filter(''); // Clear filter
// Console control
console.overrideConsole(); // Redirect browser console to Eruda
console.restoreConsole(); // Restore original console
// Global variables
console.setGlobal('$user', currentUser);
console.setGlobal('$api', apiClient);
// Error handling
console.catchGlobalErr(); // Start catching window.onerror
console.ignoreGlobalErr(); // Stop catching global errorsConsole configuration options for customizing behavior.
// Configuration object
const config: {
set<K extends keyof ConsoleConfig>(name: K, value: ConsoleConfig[K]): void;
};
interface ConsoleConfig {
/** Asynchronous rendering for better performance */
asyncRender?: boolean;
/** Enable JavaScript execution in console */
jsExecution?: boolean;
/** Catch and display global errors */
catchGlobalErr?: boolean;
/** Override browser console methods */
overrideConsole?: boolean;
/** Display extra object information */
displayExtraInfo?: boolean;
/** Display non-enumerable properties */
displayUnenumerable?: boolean;
/** Access getter values when inspecting objects */
displayGetterVal?: boolean;
/** Lazy evaluation for better performance */
lazyEvaluation?: boolean;
/** Auto display console when error occurs */
displayIfErr?: boolean;
/** Maximum number of log entries */
maxLogNum?: string;
}Usage Examples:
const console = eruda.get('console');
// Configure console behavior
console.config.set('asyncRender', false);
console.config.set('jsExecution', true);
console.config.set('catchGlobalErr', true);
console.config.set('overrideConsole', true);
console.config.set('displayExtraInfo', true);
console.config.set('displayUnenumerable', false);
console.config.set('displayGetterVal', true);
console.config.set('lazyEvaluation', false);
console.config.set('displayIfErr', true);
console.config.set('maxLogNum', '1000');
// Recommended performance settings
console.config.set('asyncRender', true);
console.config.set('lazyEvaluation', true);
console.config.set('maxLogNum', '500');