Learn the concept
Debugging with Chrome DevTools
Use Chrome DevTools for debugging (Sources panel, breakpoints, watch expressions), console methods beyond log (table, trace, time), debugger statement, VS Code debugger with launch configs, and React/Vue DevTools for framework-specific debugging.
Chrome DevTools:
Console Methods:
Breakpoints:
// Basic logging with formatting
console.log('Value:', value);
console.log('%c Styled', 'color: blue; font-size: 20px');
// Table for arrays/objects
const users = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}];
console.table(users);
console.table(users, ['name']); // Only show name column
// Stack trace
function foo() {
function bar() {
console.trace('Trace from bar');
}
bar();
}
foo();
// Timing
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch'); // fetch: 123.456ms
// Grouping
console.group('User Details');
console.log('Name:', user.name);
console.log('Email:', user.email);
console.groupEnd();
// Conditional logging
console.assert(value > 0, 'Value should be positive');
// Count calls
function processItem() {
console.count('processItem called');
}Using React DevTools to inspect component hierarchies, props, state, and hooks in real-time. Setting breakpoints in Chrome DevTools to step through component rendering logic and identify the exact line of code causing the issue.
Attaching the VS Code debugger to the Node.js process using a `launch.json` configuration, setting conditional breakpoints, and inspecting variables in the call stack to trace the execution flow and pinpoint the bug.
Using `console.time()` and `console.timeEnd()` to measure execution durations, and the Chrome DevTools Performance tab to record a profile, analyze flame charts, and identify long-running tasks or excessive re-renders.
Take a small web application with a known bug (e.g., incorrect calculation, UI not updating). Use only Chrome DevTools (breakpoints, watch expressions, console) to identify and fix the bug.
Create a simple Node.js script with a logical error. Configure `launch.json` in VS Code to debug the script, practice stepping through code, and inspect variables to find the bug.
Google's own developers rely heavily on Chrome DevTools for debugging their web applications, from search to Gmail. The tool suite is continuously improved based on internal needs for diagnosing complex performance and functional issues.
Microsoft's VS Code provides a powerful integrated debugger that is widely used by developers working on Node.js applications, TypeScript projects, and frontend frameworks. Its rich feature set for breakpoints, variable inspection, and call stack analysis is essential for debugging large-scale applications.