DevTools is your microscope for the browser—see what's happening, why it happens, and how to fix it with confidence.
Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) to open DevTools anytime.
Inspect/edit live HTML and CSS in real time. Modify layout box models and styles.
View JavaScript errors, warnings, run expressions, and output formatted debug logs.
Debug JS with line breakpoints, step through functions, and inspect call stacks.
Inspect network requests, headers, response status codes, JSON, and load timings.
Analyze CPU bottlenecks, heavy scripts, layout thrashing, and repaints.
Inspect LocalStorage, SessionStorage, Cookies, IndexedDB, and Service Workers.
Read error messages carefully! They pinpoint the exact line, column, and underlying reason.
Attempting to use a variable or function that hasn't been declared or is out of scope.
Performing an operation on an unexpected data type (e.g. reading property of null).
Mistakes in code structure such as missing closing brackets, quotes, or commas.
Network request failed due to offline connectivity, CORS, or server crashes.
Move beyond standard console.log()—use structured debugging commands.
Renders array of objects into a clean interactive tabular format.
Measures precise execution duration in milliseconds for operations.
Outputs full execution stack trace leading up to the current line.
// 1. Format tabular data cleanly
const users = [{ id: 101, name: 'Alice' }, { id: 102, name: 'Bob' }];
console.table(users);
// 2. Benchmark performance
console.time('API Call');
await fetchData();
console.timeEnd('API Call'); // Outputs: API Call: 142msInspect live elements, test style edits safely, and debug UI layouts instantly.
:hover, :focus)::before and ::after pseudo-elementsdata-* custom dataset attributesPause code execution at the exact line to inspect variables and execution state.
Inspect local, closure, and global variable values in real time while paused.
function calculateTotal(items) {
let total = 0;
for (const item of items) {
➔ total += item.price * item.qty; // Line 13 Breakpoint
}
return total;
}Monitor API endpoints, request verbs, response JSON, and download timings.
Verify request and response headers to isolate missing or invalid security tokens.
// Request Headers
Accept: application/json
Content-Type: application/json
Authorization: Bearer eyJhbGciOi...
// Response Headers
HTTP/1.1 200 OK
X-RateLimit-Limit: 100
X-RateLimit-Remaining: 92Small delays across network, JavaScript scripts, and layout rendering add up to poor UX.
Case Study: Dashboard takes ~8 seconds to load after applying a search filter.
Ensure revenue metrics, customer records, and discounts are calculated accurately.
Set breakpoints where total order amounts and discount percentages are computed.
Confirm array filtering and mapping outputs match expected report structures before rendering UI.
Master these rules to transform guessing into systematic problem solving.
console.log calls in production code.