Loading
Master the Elements, Console, Network, Performance, and Storage panels in Chrome DevTools to debug faster.
Browser DevTools are the most powerful debugging tool you already have installed. Most developers use maybe 10% of what they offer. This guide covers the panels and techniques that senior engineers use daily to debug, profile, and understand web applications.
Open DevTools with Cmd+Option+I (Mac) or Ctrl+Shift+I (Windows/Linux). Right-click any element and select "Inspect" to jump directly to it.
The Elements panel shows the live DOM tree and its styles. This is where you debug layout issues, test CSS changes, and understand why something looks wrong.
Edit anything live:
Debug CSS:
Find layout problems:
Useful tricks:
Cmd+Shift+C activates element picker — click anything on the page to inspect it$0 refers to the currently selected element in the Elements panel:hover, :focus, :active without actually interactingThe Console is a JavaScript REPL connected to your page. It is far more powerful than console.log.
Beyond console.log:
Query the page like a pro:
Debug React/Next.js apps:
Install the React Developer Tools extension. It adds Components and Profiler tabs that show your component tree, props, state, and hooks. You can edit state directly to test different scenarios.
The Network panel shows every HTTP request your page makes. This is where you debug API calls, find slow requests, and understand data flow.
Read the waterfall:
Each row is a request. The waterfall chart on the right shows timing:
If TTFB is high, the problem is server-side. If Content Download is high, the response is too large.
Filter and search:
Cmd+F) searches inside request/response bodiesInspect a request:
Click any request to see:
Simulate conditions:
The Performance panel records a timeline of everything the browser does — JavaScript execution, layout, paint, compositing.
Record a performance trace:
Cmd+Shift+E to record a page reload)Read the results:
Common problems and what to look for:
Quick performance check without the Performance panel:
Open the Console and run:
The Application panel (called "Storage" in some browsers) shows everything your app stores on the client.
Local Storage and Session Storage:
IndexedDB:
Cookies:
Cache Storage:
Service Workers:
A debugging workflow using multiple panels:
DevTools is a diagnostic tool. The more comfortable you are with it, the less time you spend guessing and the more time you spend fixing. Keep it open while you develop. Not just when something breaks.
// Table view for arrays and objects
console.table([
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
]);
// Group related logs
console.group("User data");
console.log("Name:", user.name);
console.log("Role:", user.role);
console.groupEnd();
// Measure execution time
console.time("fetch");
await fetch("/api/users");
console.timeEnd("fetch"); // fetch: 142ms
// Conditional logging
console.assert(user.role === "admin", "User is not an admin!", user);
// Count how many times something happens
console.count("render"); // render: 1, render: 2, render: 3...// Same as document.querySelector
$("nav a.active");
// Same as document.querySelectorAll (returns a real array)
$$("img:not([alt])"); // Find all images missing alt text
// Monitor function calls
monitor(fetchUserData); // Logs every time it's called with arguments
// Monitor events on an element
monitorEvents($0, "click"); // Logs every click on the selected element// Check Core Web Vitals
new PerformanceObserver((list) => {
list.getEntries().forEach(console.log);
}).observe({ type: "largest-contentful-paint", buffered: true });
// Check how long scripts take
performance
.getEntriesByType("resource")
.filter((r) => r.initiatorType === "script")
.sort((a, b) => b.duration - a.duration)
.slice(0, 5)
.forEach((r) => console.log(r.name, Math.round(r.duration) + "ms"));