Master JavaScript Console: Debugging, Formatting, and Advanced Techniques

Preface

JavaScript's most basic debug tool is console.log(). The console object also provides other useful methods that enrich the developer's debugging toolbox.

Console Object

The console object gives access to the browser console, allowing output of strings, arrays, and objects, which is helpful for debugging. It is part of the window object and supported by the Browser Object Model (BOM).

You can access it via either:

window.console.log('This works')

console.log('So does this')

Both work, but the second form is more commonly used.

Output Text

The most common element is console.log. There are four methods that output information:

log

info

warn

error

They work the same way; you pass one or more arguments and the console shows an icon indicating the log level. Errors appear with a red background and stack trace, warnings with a yellow background in Chrome.

String Substitution

You can use placeholders in the format string, e.g.: console.log('string %s', 'substitutions') Output: string substitutions Placeholders: %s – string %i or %d – integer %f – floating‑point number (e.g., %.1f for one decimal place) %o or %O – object %c – CSS styling

Example with object:

console.log('this is an object %o', {obj:{obj2:'hello'}})

Other Available Methods

assert(condition, message) – prints the message if the condition is falsy.

dir(object) – displays an interactive list of the object's properties.

table(data) – shows arrays or objects in a table format.

group(label) and groupEnd() – creates collapsible groups of log messages.

time(label) and timeEnd(label) – starts and stops a timer, useful for quick benchmarks.

These methods may vary across browsers; examples were tested in Chrome and Firefox.

Conclusion

We explored the console object and several of its methods. When debugging code, these methods are powerful tools. For more up‑to‑date information, refer to the MDN Web Docs and the living specification.