Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Console Methods & Basic Debugging
The console object has many methods beyond console.log(). Learn console.warn(), console.error(), console.table(), and console.time() to debug effectively and understand what your code is doing at every step.
Console Methods
- console.log() - General output. Most common. Print values, objects, arrays
- console.warn() - Yellow warning. For non-critical issues
- console.error() - Red error. For critical problems
- console.table() - Displays arrays/objects as a formatted table. Great for data visualization
- console.group() / console.groupEnd() - Group related logs together (collapsible)
- console.time() / console.timeEnd() - Measure execution time of code blocks
- console.clear() - Clears the console output
- console.dir() - Shows object properties in a tree view (better for DOM elements)
Console Methods Code
// Basic logging
console.log("Regular message");
console.warn("Warning: something might be wrong");
console.error("Error: something broke!");
// console.table - beautiful data display
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 28 }
];
console.table(users);
// console.group - organize logs
console.group("User Details");
console.log("Name: Alice");
console.log("Age: 25");
console.log("Role: Admin");
console.groupEnd();
// console.time - measure performance
console.time("Loop");
for (let i = 0; i < 1000000; i++) { /* work */ }
console.timeEnd("Loop"); // Loop: 5.2ms
// Debugging tip: log objects clearly
const user = { name: "Alice", age: 25 };
console.log("user:", user); // Shows the object
console.log({ user }); // Shows label + value
console.log(JSON.stringify(user)); // Shows as textTip
Tip
Use console.log({myVar}) instead of console.log(myVar) - the object shorthand shows both the variable name and its value, making it much easier to identify what you're logging when debugging multiple values.
Use console.table for objects. console.time to profile. debugger; for breakpoints. Chrome DevTools > console.log.
Common Mistake
Warning
Leaving console.log statements in production code. They expose internal data, slow performance, and look unprofessional. Use a linter rule (no-console) to catch them before deployment, or use a logging library with log levels.
Practice Task
Note
Practice all console methods: (1) Use console.table() to display an array of user objects. (2) Use console.time/timeEnd to measure a loop iterating 1 million times. (3) Use console.group/groupEnd to organize logs for a user registration flow.
Quick Quiz
Key Takeaways
- The console object has many methods beyond console.
- console.log() - General output. Most common. Print values, objects, arrays
- console.warn() - Yellow warning. For non-critical issues
- console.error() - Red error. For critical problems