3 min read
•Question 45 of 50easyWhat are useful Console methods?
Understanding console debugging techniques.
What You'll Learn
- Beyond console.log
- Formatting output
- Performance measurement
Basic Methods
code.jsJavaScript
console.log('Regular log');
console.info('Information');
console.warn('Warning');
console.error('Error');
console.debug('Debug info');Formatting
code.jsJavaScript
// String substitution
console.log('Hello, %s!', 'World');
console.log('Count: %d', 42);
console.log('Object: %o', { a: 1 });
// CSS styling
console.log(
'%cStyled text',
'color: blue; font-size: 20px; font-weight: bold;'
);Tables and Groups
code.jsJavaScript
// Table
const users = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 }
];
console.table(users);
// Groups
console.group('User Details');
console.log('Name: John');
console.log('Age: 30');
console.groupEnd();
// Collapsed group
console.groupCollapsed('More Info');
console.log('...');
console.groupEnd();Timing and Counting
code.jsJavaScript
// Timing
console.time('operation');
// ... code ...
console.timeEnd('operation');
// operation: 123.456ms
// Counting
for (let i = 0; i < 5; i++) {
console.count('loop');
}
// loop: 1, loop: 2, ...
console.countReset('loop');Other Useful Methods
code.jsJavaScript
// Clear console
console.clear();
// Assert (logs only if false)
console.assert(1 === 2, 'Math is broken!');
// Stack trace
console.trace('Where am I?');
// Directory (object properties)
console.dir(document.body);