Using console.log()0%
Common Errors and Fixes

Using console.log()

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Using console.log() and Browser Debugging Tools

The browser console is the developer's primary diagnostic command center. Beyond basic text output with console.log(), the console object provides powerful methods for inspecting complex data, measuring performance, formatting tabular data, and tracing call stacks.

1. The Console Toolkit

Open your browser's console (F12 or Ctrl + Shift + I):

JavaScript
// 1. Standard Informational Log:
console.log("Application started successfully.");
 
// 2. Warning message (Yellow highlight with warning icon):
console.warn("API token is nearing expiration.");
 
// 3. Error message (Red highlight with full stack trace):
console.error("Failed to connect to database!");
 
// 4. Formatted Table View (Invaluable for arrays and objects!):
const students = [
{ id: 1, name: "Sumit", marks: 95 },
{ id: 2, name: "Neha", marks: 98 },
{ id: 3, name: "Aarav", marks: 88 }
];
console.table(students);

2. Timing Execution Performance: console.time()

To measure how many milliseconds an algorithm or loop takes to execute:

JavaScript
console.time("ArraySortBenchmark");
 
const numbers = Array.from({ length: 100000 }, () => Math.random());
numbers.sort();
 
console.timeEnd("ArraySortBenchmark");
// Output: ArraySortBenchmark: 42.15ms

3. Grouping Logs: console.group()

Keep complex diagnostic logs organized:

JavaScript
console.group("User Authentication Flow");
console.log("Checking credentials in cache...");
console.log("Validating session token...");
console.log("User authorized as Admin.");
console.groupEnd();

4. Setting Breakpoints in Browser DevTools

While console.log() is great for quick checks, modern developers use Breakpoints:

  1. 1
    Open Chrome DevTools -> Go to the Sources tab.
  2. 2
    Find your app.js file.
  3. 3
    Click on any line number in the gutter to set a blue breakpoint marker!
  4. 4
    Trigger the action on your page: the browser will pause execution in real time!
  5. 5
    Hover over variables to inspect their live values, view the Call Stack, and step through code line-by-line using F10 (Step Over) or F11 (Step Into).

Triggering Breakpoints in Code:

JavaScript
function calculateDiscount(price) {
debugger; // Browser will automatically pause here if DevTools is open!
return price * 0.8;
}
Interactive Quiz

Practice Quiz

Question 1
What method formats and renders arrays of objects as a clean, sortable visual table in the browser console?
Question 2
Which console methods are paired together to measure the elapsed execution time of a code block?
Question 3
What happens when the browser encounters the debugger; statement while DevTools is open?
Question 4
Which console method displays a warning with a yellow background and warning icon?
Question 5
Why is relying solely on console.log for debugging discouraged in production enterprise applications?
Next Lesson

Common Errors and Fixes

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Handling Events: click, input, submitCommon Errors and Fixes

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext