The Essentials
Categorizing your output makes your logs cleaner and easier to filter. Start with these four fundamental methods to bring semantic meaning to your debugging messages.
`console.log()`
For general output, variable checks, and tracking application flow.
`console.warn()`
Highlights potential problems, API deprecations, or non-critical issues.
`console.error()`
Indicates critical failures. Logs an error message and a stack trace.
`console.info()`
Provides informational messages, separating routine logs from debugging.
`console.debug()`
Similar to `log`, but often hidden by default in DevTools, useful for verbose, low-level messages.
`console.clear()`
Clears the entire console output. Useful for decluttering during active debugging.
Deep Data Inspection
When a simple log isn't enough for complex objects or arrays, you need specialized tools. `console.table()` provides a clean, readable, spreadsheet-like view, while `console.dir()` gives an expandable tree ideal for deep-diving into object properties.
The chart illustrates the primary strength of each method. Choose `table` for structured array comparison and `dir` for comprehensive object exploration.
Performance & Counting
Measure Execution Time
Pinpoint bottlenecks by wrapping your code in `console.time()` and `console.timeEnd()` to measure the duration of any operation.
`timeEnd('API Fetch')` output:
78.45ms
Count Occurrences
Track how many times a function is called or a loop runs with `console.count()`. Use `console.countReset()` to start over.
render: 1
render: 2
render: 3
Interactive Playground
The best way to learn is by doing. Select a console method from the dropdown, review its purpose and syntax, then click "Run Example" to see it in action in the simulated console below.
Syntax:
Simulated Console Output
Click "Run Example" to see output here...