Chrome DevTools: The Complete Guide

Chrome DevTools is the most powerful tool in a web developer’s arsenal. Whether you are debugging a layout issue, optimizing a slow page, inspecting network requests, or auditing accessibility, DevTools provides everything you need in one place. Master these panels and you will diagnose and fix issues in minutes instead of hours.

Opening DevTools

Elements Panel

Inspect and edit HTML and CSS in real time. This panel is the first stop for layout and styling issues.

/* Click an element → Styles tab shows all computed styles */
/* Check/uncheck CSS properties to test changes before committing */

/* Force pseudo-class states on any element */
:hover, :focus, :active, :visited, :disabled

/* Click and drag numeric values to adjust them */
/* Hold Shift to change by 10, Ctrl to change by 100 */

Pro tip: Right-click any element → Copy → JS Path to get a unique JavaScript selector for use in automated tests or console scripts. The Styles panel shows which file and line number defines each CSS rule, making it easy to find and edit the source.

Practical Debugging Scenario

Your button has wrong padding. Right-click it, select Inspect, and the Elements panel opens with that element highlighted. In the Styles tab, you see padding: 8px from styles.css:42. You can uncheck it to see the effect, double-click to edit the value, and the change appears live on the page. Once satisfied, you know exactly what to change in your source code.

Computed Styles and Box Model

The Computed tab shows the final computed values for every CSS property after all rules, specificity, and inheritance have been applied. The Box Model visualization displays margin, border, padding, and content dimensions, making it easy to diagnose spacing issues. If an element looks larger than expected, check the box model to see if unexpected padding or border is contributing to the size.

Console Panel

The Console is your JavaScript command line and debugging output viewer:

// Logging with levels
console.log('Debug message');
console.warn('Warning message');
console.error('Error message');

// Formatted output
console.log('Name: %s, Age: %d', 'Alice', 30);
console.table([{name: 'Alice'}, {name: 'Bob'}]);
console.time('operation');
// ... code to measure ...
console.timeEnd('operation');

// DOM and object inspection
console.log($('.selector'));       // first match (jQuery-like shorthand)
console.log($$('a'));              // all matching elements
console.dir(element);              // show element as a JavaScript object

Console Power Features

• $_ — evaluates to the last result (great for iterative operations)
• $0 through $4 — references the last 5 elements you inspected in the Elements panel
• monitor(functionName) — logs every call to a function with its arguments
• copy(variable) — copies a value to your clipboard as JSON
• debug(functionName) — sets a breakpoint on the first line of a function
• table(array) — displays arrays and objects as sortable tables

Console Sidebar Filters

The Console sidebar (click the funnel icon) lets you filter messages by type: Errors, Warnings, Info, Verbose, and User Messages. This is invaluable when a page generates hundreds of log messages and you need to isolate specific issues. Combined with the - prefix to exclude patterns, you can build precise filter queries.

Network Panel

Debug and optimize HTTP requests, responses, and overall page performance:

• Filter by type — XHR/Fetch, JS, CSS, Img, Font, Doc, WS
• Block specific requests — Right-click → Block request URL to test how the page behaves without a dependency
• Throttling — Simulate Slow 3G, Fast 3G, or offline to test real-world conditions
• Preserve log — Keep requests visible across page reloads (essential for debugging redirects)
• Disable cache — Force fresh requests while DevTools is open

Pro tip: The Initiator column shows what triggered each request — invaluable for finding unexpected API calls or figuring out which script loaded a particular resource. Use the Timing tab to see exactly where time is spent (DNS lookup, TCP handshake, TLS negotiation, request queuing).

Real-World Network Debugging

Your dashboard page loads in 8 seconds. Open the Network panel, reload, and sort by Time (descending). You see a single unoptimized API image taking 4 seconds and three serial JavaScript bundle files that could be loaded in parallel. You fix the image compression and add async/defer to your script tags, bringing load time down to 2.5 seconds.

Waterfall Analysis

The waterfall chart in the Network panel visualizes every phase of each request: DNS resolution, TCP connection, TLS negotiation, request sending, waiting (TTFB), and content download. Long DNS or TLS times suggest server configuration issues. Long TTFB indicates server-side processing bottlenecks. Large content download bars point to unoptimized assets that need compression or resizing.

Sources Panel

Debug JavaScript with breakpoints for systematic code analysis:

• Breakpoint types:
  • Line breakpoint — pauses on a specific line of code
  • Conditional breakpoint — pauses only when a condition is true (e.g., count > 5)
  • DOM breakpoint — pauses when a specific element is modified, attributes change, or it is removed
  • Event listener breakpoint — pauses on click, scroll, keydown, or any other event
  • XHR/fetch breakpoint — pauses when a specific URL pattern is requested
• Step through code: Step over (F10), step into (F11), step out (Shift+F11)
• Watch expressions: Track specific variable values in real time
• Scope panel: View local, closure, and global variables at the current execution point

Pro tip: Use the Call Stack panel to trace how the code arrived at the breakpoint. This is invaluable for understanding asynchronous code flow. The async checkbox in the Call Stack reveals the full asynchronous chain, showing which promise or async function initiated the current execution.

Performance Panel

Record and analyze runtime performance to find jank and bottlenecks:

1. Click Record (circle button)
2. Perform the action you want to measure
3. Stop recording

Look for:

• Long yellow bars (JavaScript execution) — these block the main thread
• Red triangles in the waterfall — indicate forced reflows and layout thrashing
• FPS counter — frames per second below 30 indicates noticeable jank

The Bottom-Up and Call Tree tabs show which functions consumed the most time, helping you pinpoint specific performance bottlenecks rather than guessing.

Identifying Layout Thrashing

Forced reflows occur when JavaScript reads layout properties (like offsetHeight or getComputedStyle) after making style changes, forcing the browser to recalculate layout before the next frame. The Performance panel highlights these with red warning triangles. Fix them by batching reads together and writes together, or using requestAnimationFrame to separate reads from subsequent writes.

Application Panel

Inspect all forms of browser storage and application data:

• Local Storage and Session Storage — View, add, edit, and delete key-value pairs
• Cookies — Inspect individual cookies, their values, domains, and expiration dates
• Cache Storage — Service worker cache contents
• IndexedDB — Browser database tables and records
• Service Workers — Register, unregister, and debug service workers

Pro tip: Clear all site data with one click: Application → Storage → Clear site data. This is faster than digging through browser settings and useful when testing fresh-state scenarios.

Service Worker Debugging

The Service Workers pane shows all registered workers for the current origin. You can unregister individual workers, bypass the network for debugging, and simulate offline conditions. The “Update on reload” checkbox forces the service worker to update on every page load, which is essential during development when you’re iterating on caching strategies.

Lighthouse Panel

Audit your site for performance, accessibility, SEO, and best practices:

Categories to test:
☑ Performance
☑ Accessibility
☑ Best Practices
☑ SEO
☑ Progressive Web App

Generate a report with actionable recommendations and scores out of 100. Each finding includes an explanation and specific guidance on how to fix it. Run Lighthouse on every page before a production release.

Custom Lighthouse Configuration

For advanced users, Lighthouse supports programmatic runs via Node.js CLI with custom configurations. You can define custom scoring weights, disable specific audits, or add custom assertions for CI pipelines. Running Lighthouse in headless Chrome during CI ensures that performance regressions are caught before they reach production.

Rendering Panel

Enable via Ctrl+Shift+P, type “Rendering,” then press Enter:

• Paint flashing — Highlights areas that are being repainted (green flashes indicate repaints)
• Layout shift regions — Shows CLS (Cumulative Layout Shift) areas with blue rectangles
• Frame rendering stats — FPS, GPU memory usage
• Emulate CSS media type — Test print or screen styles without changing your viewport
• Emulate CSS prefers-color-scheme — Test dark mode and light mode

The Rendering panel is essential for debugging layout shifts that hurt your Core Web Vitals scores. Enable layout shift regions and interact with the page to see exactly which elements are shifting and by how much.

Memory Panel

The Memory panel helps identify JavaScript memory leaks and DOM retention issues:

1. Take a heap snapshot
2. Perform actions in the page
3. Take another snapshot and compare

Look for detached DOM nodes — elements that have been removed from the DOM but are still held in memory by JavaScript references. These are the most common source of memory leaks in web applications. The comparison view shows which objects were allocated between snapshots and which were retained, helping you trace leaks back to specific closures or event listeners.

FAQ

How do I debug CSS grid or flexbox layouts?

Use the Elements panel’s Layout tab to toggle grid and flexbox overlays. Grid overlays display grid lines, track sizes, and area names. Flexbox overlays show the main and cross axes, along with item alignment. You can customize overlay colors for different containers.

What is the fastest way to find a specific network request?

Use the filter bar in the Network panel with the - operator to exclude patterns. Combine filters like domain:api.example.com -status:200 to find failing requests from a specific domain. You can also filter by request size, mime type, or response status.

How do I simulate mobile devices in DevTools?

Click the device toolbar icon (mobile phone icon) or press Ctrl+Shift+M. Select from a library of device presets or create custom viewport sizes. You can also emulate device pixel ratio, touch events, and throttled network conditions simultaneously.

Can I edit JavaScript directly in DevTools?

Yes. The Sources panel allows you to edit any JavaScript file and save changes with Ctrl+S. Changes apply immediately to the current page. For persistent changes, use workspaces to map local files to DevTools, enabling two-way sync between edits and your file system.

How do I debug WebSocket connections?

The Network panel lists WebSocket connections under the WS filter. Clicking a connection opens the Frames tab, where you can inspect all sent and received messages. The Messages view shows payload content, helping you debug real-time communication issues.

Related: Check our VS Code shortcuts guide and responsive design guide.