console.log
General value inspection.
Platform under construction
Console Debugging
Console debugging helps you inspect values, flow and timing while code runs.
console.group("render");
console.log("items", items.length);
console.table(items);
console.groupEnd();
Errors & Debugging
Console output should answer a debugging question.
console.log is useful, but the console has more tools: warn, error, table, group, time and trace.
Good console debugging is temporary and focused. Each log should explain what value or branch you are inspecting.
Remove noisy debug logs before production unless they are deliberate diagnostics behind a controlled setting.
console.table
Readable arrays and objects.
console.group
Groups related output.
console.time
Measures elapsed time.
Examples
Good debugging code keeps the failure path visible.
Focused debugging output
console.group("filter records");
console.log("input count", records.length);
console.log("active count", activeRecords.length);
console.groupEnd();
Noisy logs without labels
console.log(records); console.log(activeRecords); console.log(result); // What question are these logs answering?
Code patterns
Reusable examples for quick reference.
These examples focus on the debugging patterns you will reuse: safe parsing, throwing, custom error types, console inspection, breakpoints and async failure handling.
Table records
View arrays of objects clearly.
console.table(records);
Group a render pass
Keep related logs together.
console.group("render");
console.log("count", records.length);
console.groupEnd();
Time work
Measure a slow operation.
console.time("filter");
const active = records.filter((record) => record.active);
console.timeEnd("filter");
Trace call path
Find who called a function.
function render() {
console.trace("render called");
}
Rules that matter
Make failures observable and recoverable where possible.
Debugging starts before something breaks. Clear error types, helpful messages and visible failure states make the code easier to repair.
Label logs
A value without context is hard to use.
Use table for rows
Arrays of objects are easier to scan in tables.
Group related logs
It keeps the console readable.
Measure with time/timeEnd
Do not guess performance.
Remove temporary logs
Do not ship noisy debugging.
Use error and warn deliberately
Severity should mean something.
Production thinking
Reliable software is built by handling failure deliberately.
Why does this matter?
Debugging is faster when logs are written like answers to specific questions.
Accessibility
Console debugging should not replace visible user-facing error states.
Production note
Production diagnostics should be intentional, controlled and safe for sensitive data.
SEO note
Console errors during render can reveal broken client-side content before publishing.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add console.group around the logs.
- Add console.time and console.timeEnd.
- Replace console.table with console.log and compare readability.
Practice assignment
Do this before moving to the next topic.
- Use console.log with a label.
- Use console.table for an array of objects.
- Use console.time and console.timeEnd.
Try it yourself
Build a visible debug log
Self-check
Before you continue, prove that you understand Console Debugging.
A JavaScript feature is not production-ready until you know how it fails and how you will inspect that failure.
- Can you explain console.table?
- Can you explain console.group?
- Can you explain console.time?
- Can you explain why labels matter?
- Can you explain why debug logs should be removed or controlled?