Mastering JavaScript Console: Logs, Placeholders, Grouping & Profiling

1. Displaying Information Commands

The most commonly used command is console.log.

2. Placeholders

console

supports printf‑style placeholders: %s for strings, %d or %i for integers, %f for floating‑point numbers, %o for expandable DOM objects, %O for listing DOM properties, and %c for CSS‑styled strings.

3. Text Output with %c

The %c placeholder applies CSS styles to the following string, enabling colorful or formatted console output.

4. Image‑like Output

Since the console cannot embed real images, background‑image tricks with spaces, font‑size, padding, and line‑height can simulate pictures. The console‑image plugin simplifies this.

5. Grouping Information

Use console.group and console.groupEnd to create collapsible sections in the console.

6. Inspecting Objects

console.dir()

displays all properties and methods of an object.

7. Viewing Node HTML

console.dirxml()

shows the HTML/XML source of a specific DOM node.

8. Assertions

console.assert()

checks whether an expression is true; if not, it logs an error and throws an exception.

9. Tracing Calls

console.trace()

prints a stack trace showing the call path to the current point.

10. Timing Execution

console.time()

starts a timer, and console.timeEnd() stops it, displaying the elapsed time.

11. Performance Profiling

console.profile()

starts a JavaScript CPU profiler; console.profileEnd() stops it and shows a breakdown of execution time for each function.