Chrome DevTools ships with every installation of Google Chrome, and it remains the most powerful debugging toolkit available to web developers. Whether you are diagnosing a CSS layout issue, profiling JavaScript performance, debugging network requests, or auditing accessibility, DevTools has a panel for it.
This guide covers the six most important DevTools panels in depth, with practical techniques you can apply to real debugging sessions today. Open DevTools with F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac) and follow along.
Elements Panel: Inspecting and Editing the DOM
The Elements panel shows the live DOM tree and every CSS rule applied to each element. This is where most debugging sessions start.
Selecting Elements
Click the inspect icon (top-left corner of DevTools) or press Ctrl+Shift+C to activate the element picker. Hover over any element on the page to see its dimensions, and click to select it. The selected element appears highlighted in the DOM tree, and its CSS rules display in the Styles pane on the right.
Editing HTML Live
Double-click any element in the DOM tree to edit its HTML directly. You can change text content, modify attributes, add new elements, or delete existing ones. These changes are temporary and reset on page reload, which makes this a safe way to experiment with structural changes before committing them to code.
<!-- Right-click an element and select "Edit as HTML" for full editing -->
<!-- Useful for testing structural changes without touching your source code -->
<div class="card" data-testid="product-card">
<h3 class="card-title">Edit this text live</h3>
</div>CSS Debugging
The Styles pane is where CSS debugging happens. For the selected element, you see every CSS rule that applies, in specificity order. Key techniques:
- Toggle properties: Click the checkbox next to any CSS property to enable or disable it. This is the fastest way to identify which rule is causing a visual problem.
- Edit values inline: Click any CSS value to modify it. Changes apply instantly. Use the arrow keys to increment and decrement numeric values.
- Add new rules: Click the
+button to add a new CSS rule for the selected element. Test new styles without opening your stylesheet. - Force element states: Click the
:hovbutton to force pseudo-states like:hover,:focus,:active, and:visited. Debug hover styles without keeping your mouse on the element.
The Computed Tab
The Computed tab shows the final calculated values for every CSS property on the selected element. When the Styles pane shows you what rules exist, the Computed tab shows you what actually won. The box model visualization at the top displays margin, border, padding, and content dimensions. Click any value in the box model to edit it directly.
Console: Beyond console.log
The Console is more than a place where console.log output appears. It is a full JavaScript REPL that interacts with the live page.
Built-in Selectors
// DevTools built-in shortcuts
$("selector") // Returns the first matching element (like querySelector)
$$("selector") // Returns all matching elements (like querySelectorAll)
$0 // References the currently selected element in the Elements panel
$_ // References the return value of the last Console expression
// Examples
$(".sidebar") // First element with class "sidebar"
$$("article img") // All images inside article elements
$0.style.border = "2px solid red" // Highlight the selected elementAdvanced Console Methods
// console.table() — display data as a sortable table
const users = [{name: "Alice", role: "dev"}, {name: "Bob", role: "design"}];
console.table(users);
// console.time() / console.timeEnd() — measure execution time
console.time("fetchData");
await fetch("/api/users");
console.timeEnd("fetchData"); // Output: fetchData: 142.3ms
// console.group() — organize related log messages
console.group("User Authentication");
console.log("Token valid:", true);
console.log("Expires:", "2026-04-01");
console.groupEnd();
// console.assert() — log only when a condition is false
console.assert(response.status === 200, "API returned error:", response.status);
// console.trace() — print the call stack at the current point
function handleClick() {
console.trace("Click handler triggered");
}Monitoring Events
// Monitor all events on an element
monitorEvents(document.body, "click");
// Monitor specific event types
monitorEvents($0, ["focus", "blur"]);
// Stop monitoring
unmonitorEvents(document.body);Network Panel: Debugging Requests
The Network panel records every HTTP request the page makes: HTML documents, CSS stylesheets, JavaScript files, images, fonts, API calls, and WebSocket connections. This panel is essential for debugging loading performance and API interactions.
Understanding the Request List
Each request row shows the resource URL, HTTP method, status code, response type, size, and timing. Click any request to see its full details: request headers, response headers, response body, cookies, and a timing breakdown showing DNS lookup, connection time, TLS negotiation, time to first byte, and content download duration.
Filtering Requests
Use the filter bar at the top to narrow results. The type buttons (All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS) let you focus on specific resource types. The text filter accepts URLs, domains, and status codes. For API debugging, click “Fetch/XHR” to see only AJAX calls.
// Network filter examples
status-code:404 // Show only 404 responses
domain:api.example.com // Show only requests to a specific domain
larger-than:100k // Show requests with responses over 100KB
method:POST // Show only POST requests
-domain:cdn.example.com // Exclude a specific domainThrottling Network Speed
The “No throttling” dropdown lets you simulate slow connections: Fast 3G, Slow 3G, or offline. This reveals performance problems that only appear on slower connections, such as scripts that block rendering, images that take too long to decode, or API calls that time out.
Copy as cURL or Fetch
Right-click any request and select “Copy as cURL” to get the exact command that reproduces the request in your terminal, complete with headers, cookies, and request body. “Copy as fetch” gives you the equivalent JavaScript code. This is invaluable for reproducing API issues outside the browser.
Performance Panel: Finding Bottlenecks
The Performance panel records a timeline of everything that happens during page load or user interaction: JavaScript execution, layout calculations, paint operations, compositing, and idle time. Understanding this panel helps you diagnose slow pages and janky animations.
Recording a Performance Profile
- Click the record button or press
Ctrl+E. - Perform the action you want to profile (load a page, click a button, scroll).
- Click stop. DevTools displays a flame chart of all activity during the recording.
Reading the Flame Chart
The flame chart shows function calls stacked vertically (callers on top, callees below) and time flowing horizontally. Wide bars indicate functions that took a long time. Look for:
- Long Tasks: Any task over 50ms blocks the main thread and can cause visible jank. These appear as red-flagged bars in the timeline.
- Layout thrashing: Rapid alternation between reading and writing DOM properties forces the browser to recalculate layout repeatedly. Look for clusters of purple “Layout” events.
- Excessive paint: Large or frequent paint operations (green bars) indicate that the browser is redrawing more of the screen than necessary.
Key Metrics in the Summary
After recording, the Summary tab shows time distribution across categories: Scripting, Rendering, Painting, System, and Idle. If Scripting dominates, optimize your JavaScript. If Rendering is high, look for layout thrashing. For further guidance on optimizing these metrics, see our web performance optimization guide.
Sources Panel: JavaScript Debugging
The Sources panel is a full-featured JavaScript debugger. It lets you set breakpoints, step through code execution line by line, inspect variable values, and watch expressions.
Setting Breakpoints
// Method 1: Click a line number in the Sources panel
// Method 2: Add a debugger statement in your code
function processOrder(order) {
debugger; // Execution pauses here when DevTools is open
const total = order.items.reduce((sum, item) => sum + item.price, 0);
return total;
}
// Method 3: Conditional breakpoints
// Right-click a line number → "Add conditional breakpoint"
// Enter a condition like: order.total > 1000
// Execution only pauses when the condition is trueStepping Through Code
Once paused at a breakpoint, use the stepping controls:
- Step Over (F10): Execute the current line and move to the next one in the same function.
- Step Into (F11): If the current line calls a function, jump into that function.
- Step Out (Shift+F11): Finish the current function and return to the caller.
- Resume (F8): Continue execution until the next breakpoint.
The Scope Pane
While paused, the Scope pane shows all variables in the current scope: local variables, closure variables, and global variables. Hover over any variable in the source code to see its current value inline. The Watch pane lets you add expressions that update automatically as you step through code.
Event Listener Breakpoints
In the Sources panel sidebar, expand “Event Listener Breakpoints” to pause on specific events without setting breakpoints in code. Check “Mouse > click” to pause whenever any click handler fires. Check “XHR/fetch Breakpoints” to pause when a specific URL is requested. This is useful when you do not know which function handles a particular event.
Lighthouse: Automated Auditing
Lighthouse runs automated audits for performance, accessibility, SEO, best practices, and progressive web app compliance. It generates a scored report with specific recommendations for improvement.
Running a Lighthouse Audit
- Open the Lighthouse panel in DevTools.
- Select the categories you want to audit (Performance, Accessibility, Best Practices, SEO, PWA).
- Choose the device type (Mobile or Desktop). Mobile audits apply network throttling and a slower CPU profile.
- Click “Analyze page load” and wait for the report.
Understanding the Scores
Each category gets a score from 0 to 100. The Performance score weighs Core Web Vitals heavily: Largest Contentful Paint, Cumulative Layout Shift, and Total Blocking Time account for the majority of the score. The Accessibility score checks WCAG compliance: color contrast, ARIA attributes, heading hierarchy, and keyboard navigation.
Actionable Recommendations
The most valuable part of Lighthouse is the “Opportunities” section, which lists specific changes with estimated impact. Common recommendations include serving images in modern formats (WebP or AVIF), eliminating render-blocking resources, reducing unused JavaScript, and adding missing ARIA labels. Each recommendation links to detailed documentation explaining the issue and fix. For a deeper dive into implementing these recommendations, see our performance optimization guide.
Productivity Tips and Shortcuts
These shortcuts and features save significant time during daily debugging work:
- $0 through $4: Reference the last five elements you selected in the Elements panel.
$0is the most recent. - Ctrl+P (Cmd+P): Quick Open to jump to any source file by name. Works like your code editor’s file finder.
- Ctrl+Shift+P (Cmd+Shift+P): Command Menu. Search for any DevTools action: “Capture screenshot,” “Show rendering,” “Block request URL.”
- Device Mode (Ctrl+Shift+M): Simulate mobile viewports with specific device dimensions, pixel ratios, and user agent strings.
- Local Overrides: In the Sources panel, set up Local Overrides to persist CSS and JavaScript changes across page reloads. Changes save to a local folder and apply automatically.
- Network request blocking: Right-click any request in the Network panel and select “Block request URL.” The page reloads without that resource, showing you what breaks. Useful for testing graceful degradation.
Workspace Integration
DevTools can connect to your local filesystem through Workspaces. Changes you make in the Elements panel’s Styles pane save directly to your CSS source files. This turns DevTools into a live CSS editor that writes changes back to your project. Set this up in Settings > Workspace > Add folder.
DevTools for CSS Grid and Flexbox
Modern DevTools includes dedicated debugging features for CSS Grid and Flexbox layouts. In the Elements panel, look for the “grid” or “flex” badges next to elements that use these layout modes. Click the badge to toggle visual overlay markers that show grid lines, track numbers, area names, and flex item sizing.
The Layout panel in the sidebar gives you controls over these overlays. For Grid, you can show line numbers, area names, and extend grid lines. For Flexbox, you see how items stretch, shrink, and wrap within their container. These visual tools make debugging complex layouts significantly faster than inspecting CSS properties manually.
Frequently Asked Questions
How do I debug JavaScript that runs before I can open DevTools?
Add debugger; statements to your source code, or launch Chrome from the command line with --auto-open-devtools-for-tabs. You can also use the Sources panel’s “Event Listener Breakpoints” to pause on the DOMContentLoaded event, which fires early in the page lifecycle.
Can I use DevTools to test responsive design without actual devices?
Device Mode (Ctrl+Shift+M) simulates specific device viewports, pixel densities, and touch events. While it catches most responsive design issues, it does not perfectly replicate device rendering engines. Test on real devices for final verification, especially for iOS Safari, which has unique viewport and scrolling behaviors.
What is the difference between the Memory and Performance panels?
The Performance panel records a timeline of what happened during a time period: function calls, layout, paint, and compositing. The Memory panel takes snapshots of the JavaScript heap to find memory leaks. Use Performance to diagnose slow interactions and Memory to diagnose increasing memory usage over time.
How do I persist DevTools changes across page reloads?
Use Local Overrides. In the Sources panel, go to the Overrides tab, click “Select folder for overrides,” and choose a local directory. Enable overrides, then any changes you make to CSS or JavaScript in DevTools persist across reloads. This is useful for testing fixes on production sites or third-party pages where you do not have source access. For your own projects, connecting a proper development workflow with file watching and hot reload is the better long-term approach.
