Chrome DevTools

Chrome DevTools is the most important tool in a web developer’s arsenal. It lets you inspect, debug, profile, and optimise your web applications.

Elements Panel

Inspect and modify HTML and CSS in real time.

Inspecting Elements

Right-click any element → Inspect to open DevTools with that element selected.

• Styles pane: See all CSS rules affecting the element, including inherited and computed styles
• Box model diagram: Visual padding, border, margin
• Computed tab: Final computed values for all properties
• Event Listeners tab: See all event listeners attached to the element

Live CSS Editing

/* Click any property value to edit it */
/* Changes are live but temporary — refresh to reset */

/* Toggle rules on/off with checkbox */
/* Add new rules by clicking between brackets */
/* See specificity with the coloured circle indicators */

CSS Tricks

• Force state: Right-click an element → Force State → :hover, :active, :focus, :visited
• Copy selector: Right-click a rule → Copy → Copy selector
• Find CSS source: Click the filename link next to any rule to open the Sources tab
• Filter CSS: Type in the filter box above the Styles pane to find specific properties

Console

Logging Levels

1
console.log("Basic info");
2
console.info("Informational");
3
console.warn("Warning message");    // yellow
4
console.error("Error message");     // red with stack trace
5
console.debug("Debug message");     // verbose

Useful Console Methods

1
// Tabular data
2
console.table([
3
  { name: "Alice", age: 30, role: "Admin" },
4
  { name: "Bob", age: 25, role: "User" },
5
]);
6

7
// Group related logs
8
console.group("User Details");
9
console.log("Name:", user.name);
10
console.log("Email:", user.email);
11
console.groupEnd();
12

13
// Timing
14
console.time("fetch-users");
15
await fetchUsers();
16
console.timeEnd("fetch-users"); // "fetch-users: 234ms"
17

18
// Count occurrences
19
function handleClick() {
20
  console.count("Button clicked");
21
}
22

23
// Stack trace
24
console.trace("Where was this called from?");
25

26
// Styled logs
27
console.log("%cStyled message", "color: blue; font-size: 20px; font-weight: bold");

$ Commands

1
$0         // Last inspected element
2
$1         // Second-to-last inspected element
3
$$("div")  // querySelectorAll shorthand
4
$x("//div") // XPath query
5
$_         // Last evaluated result

Network Tab

Inspect all network requests made by the page.

Key Features

• Waterfall view: See request timing (DNS, TCP, TLS, request, response)
• Filter by type: XHR/Fetch, JS, CSS, Img, Media, Font, Doc, WS
• Search: Search across all request/response bodies
• Block requests: Right-click → Block request URL to simulate missing resources
• Replay: Right-click → Replay XHR to re-issue a request
• Copy as fetch: Right-click → Copy → Copy as fetch

Throttling

Simulate slow connections:

1. Go to the Network tab
2. Click the throttle dropdown (default: “No throttling”)
3. Select “Slow 3G” or “Fast 3G”
4. Or add custom profiles with specific bandwidth/latency

Checking Request Details

1
// Headers: request and response headers
2
// Payload: POST request body
3
// Preview: Formatted response (parsed JSON, rendered image)
4
// Response: Raw response body
5
// Timing: Detailed timing breakdown
6
// Cookies: Cookies sent with the request

Sources Tab (Debugger)

Set breakpoints and step through JavaScript code.

Types of Breakpoints

Debugging Workflow

1. Set a breakpoint on the line you want to inspect
2. Trigger the action that runs the code
3. Execution pauses — now you can inspect

Controls:

Watch panel: Add expressions to track their value across breakpoints. Scope panel: See all local, closure, and global variables.

Performance Tab

Record and analyse runtime performance.

Recording

1. Open Performance tab
2. Click the ⏺ Record button
3. Interact with your page
4. Click Stop

Interpreting Results

• FPS chart: Green bars at top = smooth. Red bars = jank (frame drops)
• CPU chart: Which operations are consuming CPU time
• Flame chart: See the call stack over time — wide bars = long operations
• Summary: Time breakdown (Scripting, Rendering, Painting, System, Idle, etc.)

Common Performance Issues

• Forced reflows: Reading layout properties (like offsetHeight) after changing styles
• Long tasks: Main thread blocked for > 50ms
• Layout thrashing: Repeated read/write cycles forcing multiple layouts
• Excessive DOM size: Too many elements in the DOM

Lighthouse Tab

Automated audit for performance, accessibility, SEO, and best practices.

1
// Generate a report
2
// 1. Open Lighthouse tab
3
// 2. Select categories (Performance, Accessibility, Best Practices, SEO)
4
// 3. Click "Generate report"
5
// 4. Review scores and recommended fixes

Core Web Vitals

Memory Tab

Detect memory leaks by recording heap snapshots:

1. Go to Memory tab
2. Select “Heap snapshot” → Take snapshot
3. Perform actions in your app (open/close modals, navigate)
4. Take another snapshot
5. Compare snapshots — look for retained objects that shouldn’t exist

Signs of a memory leak:

• Heap size keeps growing after repeated actions
• Detached DOM elements (elements removed from DOM but still referenced in JS)
• Event listeners on detached elements

Quick Reference

Practice Exercises

1. Network debugging: Open the Network tab and visit a website. Filter to only XHR requests. Find a JSON API call and inspect the response. Try throttling to Slow 3G and reload.

2. Debugger walkthrough: Write a small script with a bug (e.g., off-by-one in a loop, undefined variable access). Use the Sources tab to set breakpoints, step through the code, and identify the bug by inspecting variables.

3. Performance audit: Run Lighthouse on your own site (or a test page). Note the Performance, Accessibility, and Best Practices scores. Pick one improvement suggestion and implement it.