Complete Guide to Chrome Developer Tools in 2026

Opening Chrome DevTools

Chrome Developer Tools (DevTools) is a set of web development and debugging tools built directly into Google Chrome. It provides real-time inspection and editing of HTML, CSS, and JavaScript, network request monitoring, performance profiling, and much more. Every web developer uses DevTools regularly, and understanding its capabilities deeply will make you significantly more productive.

There are several ways to open DevTools. The keyboard shortcut is the fastest: press F12 or Ctrl+Shift+I on Windows/Linux, or Cmd+Option+I on macOS. You can also right-click any element on the page and select "Inspect" from the context menu, which opens DevTools with that specific element highlighted in the Elements panel.

The DevTools window can be docked to the bottom, right side, or left side of the browser window, or undocked into a separate window entirely. Toggle the dock position by clicking the three-dot menu in the top-right corner of DevTools and selecting your preferred layout. For working on responsive designs, the bottom dock is often most practical. For JavaScript debugging, a side dock or separate window gives you more vertical space for the source code.

Chrome updates DevTools with each browser release, roughly every four weeks. The features described in this guide reflect Chrome 134, the current stable release as of March 2026.

Elements Panel

The Elements panel displays the live DOM tree of the current page. It is the primary tool for inspecting and editing HTML structure, CSS styles, and layout in real time.

Inspecting Elements

Click the element picker icon (the cursor-in-a-box icon in the top-left of DevTools, or press Ctrl+Shift+C / Cmd+Shift+C) to enter inspection mode. As you hover over elements on the page, DevTools highlights them and shows their dimensions, padding, and margin. Clicking an element selects it in the DOM tree and displays its applied styles in the Styles pane.

The DOM tree supports direct editing. Double-click any element tag, attribute, or text content to modify it. Right-click for options to add attributes, edit as HTML, duplicate the element, or delete it. These changes happen in real time but are lost on page refresh.

Styles Pane

The Styles pane on the right side of the Elements panel shows all CSS rules applied to the selected element, ordered by specificity. You can click any property value to edit it, add new properties, or toggle individual rules on and off using the checkboxes. The color picker appears when you click on any color value, supporting hex, RGB, HSL, and HWB color formats.

The Computed tab shows the final computed values for all CSS properties after cascading and inheritance. This is useful when you need to understand why a particular style is being applied or overridden. The box model diagram shows the exact dimensions, padding, border, and margin of the selected element.

The Layout tab shows CSS Grid and Flexbox overlays. When you select a grid or flex container, you can toggle persistent overlays that show track sizes, gap areas, and alignment. This visual feedback is invaluable when debugging complex layouts.

For quick CSS prototyping, you can use our CSS Minifier to compress your finalized stylesheets before deployment.

Console Panel

The Console panel serves two purposes: displaying log messages and errors from the page, and providing an interactive JavaScript REPL (Read-Eval-Print Loop) where you can execute code in the context of the current page.

Logging and Filtering

The console displays messages at different severity levels: console.log() for general output, console.warn() for warnings (yellow), console.error() for errors (red), and console.info() for informational messages. You can filter by severity using the level dropdown.

Beyond basic logging, the Console API offers several useful methods that many developers overlook:

• console.table(data) renders arrays and objects as sortable HTML tables, making it far easier to read structured data than the standard expandable tree view.
• console.group('label') and console.groupEnd() create collapsible groups in the console output, useful for organizing related messages.
• console.time('label') and console.timeEnd('label') measure elapsed time between two points in your code.
• console.assert(condition, message) only logs the message if the condition is false, useful for lightweight invariant checking.
• console.trace() prints the current stack trace, showing exactly how execution reached that point.

Interactive Execution

You can type any JavaScript expression at the console prompt and press Enter to evaluate it. The result is displayed immediately. Multi-line statements are supported by pressing Shift+Enter for a new line. The console has access to the full page context, including all global variables, functions, and the DOM.

Several convenience variables are available in the console. $0 references the currently selected element in the Elements panel. $1 through $4 reference previously selected elements. $_ holds the result of the last evaluated expression. $(selector) is an alias for document.querySelector(), and $$(selector) is an alias for document.querySelectorAll().

When working with JSON data in the console, our JSON Formatter tool can help you format and validate JSON strings before pasting them into your code.

Sources Panel

The Sources panel is your primary debugging environment within DevTools. It provides a full-featured code editor with breakpoint support, step-through debugging, watch expressions, and scope inspection.

Setting Breakpoints

Navigate to a JavaScript file using the file tree on the left side of the Sources panel, or press Ctrl+P / Cmd+P to open the quick-open dialog and search by filename. Click the line number gutter to set a breakpoint on that line. A blue marker appears indicating the breakpoint is active.

When JavaScript execution reaches a breakpoint, it pauses. You can then inspect the values of all variables in the current scope using the Scope pane, examine the call stack to understand how execution arrived at this point, and step through code one line at a time.

Several types of breakpoints are available beyond the standard line breakpoint:

• Conditional breakpoints: right-click the gutter and select "Add conditional breakpoint." Execution only pauses when the expression evaluates to true.
• Logpoints: right-click and select "Add logpoint." Instead of pausing, it logs a message to the console when that line executes. This is like adding a console.log() without modifying your source code.
• DOM breakpoints: in the Elements panel, right-click an element and set a breakpoint for subtree modifications, attribute modifications, or node removal.
• XHR/fetch breakpoints: pause when a request URL contains a specified string.
• Event listener breakpoints: pause when a specific type of event (click, keypress, etc.) fires.

Stepping Through Code

Once paused at a breakpoint, use the stepping controls in the toolbar:

• Resume (F8): continue execution until the next breakpoint.
• Step over (F10): execute the current line and move to the next line, without entering function calls.
• Step into (F11): if the current line contains a function call, enter that function.
• Step out (Shift+F11): finish executing the current function and return to the caller.

The Watch pane lets you add expressions that are evaluated automatically each time execution pauses. This is useful for monitoring specific variables or computed values across multiple breakpoints.

Network Panel

The Network panel records all HTTP requests made by the page, providing detailed information about each request's headers, payload, response, timing, and size. It is essential for debugging API calls, identifying slow resources, and understanding data flow.

Recording and Filtering

Network recording starts automatically when DevTools is open. The toolbar at the top provides filters by resource type: All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm, Manifest, and Other. You can also type in the filter box to search by URL, method, status code, or header value.

Each request row shows the resource name, HTTP status code, type, initiator (what triggered the request), size (transferred and actual), and time (total and time-to-first-byte). Click any request to see detailed information in the side panel.

Request Details

The detail view for each request includes several tabs:

• Headers: shows request and response headers, the request URL, method, and status code.
• Payload: displays the request body for POST/PUT requests, both as parsed form data and as raw source.
• Preview: renders the response body. For JSON responses, it displays a formatted, expandable tree. For HTML, it renders the document. For images, it shows the image.
• Response: shows the raw response body text.
• Timing: breaks down the request lifecycle into phases: queueing, DNS lookup, initial connection, SSL handshake, request sent, waiting (TTFB), and content download.

Throttling

The throttling dropdown lets you simulate slower network connections. Presets include Fast 3G, Slow 3G, and Offline. You can also create custom profiles with specific download speed, upload speed, and latency values. This is critical for testing how your application behaves on mobile networks or degraded connections.

Performance Panel

The Performance panel provides a detailed timeline of everything the browser does to render a page: JavaScript execution, style calculations, layout, painting, and compositing. It is the primary tool for diagnosing slow page loads and janky interactions.

Recording a Profile

Click the record button (or press Ctrl+E / Cmd+E), interact with the page, then click stop. DevTools generates a flame chart showing the work the browser performed during the recording period. The horizontal axis represents time, and each bar represents a task or function call. Wider bars took longer. Stacked bars show the call hierarchy.

For page load profiling, click the reload button next to the record button. This starts recording, refreshes the page, and automatically stops recording after the page finishes loading. The resulting profile includes all the work required to load and render the initial page.

Reading the Flame Chart

The flame chart is divided into several tracks:

• Network: shows all network requests on a timeline.
• Frames: shows frame rendering times. A frame above the 16.67ms line (for 60fps) indicates a dropped frame.
• Main: shows all work on the main thread, including JavaScript execution, style calculations, layout, and painting.
• Raster, GPU, Compositor: show rendering pipeline work.

Long tasks (over 50ms) are flagged with a red triangle in the top-right corner. These are primary candidates for optimization. Click on any bar to see details about that function call, including its duration, self time (excluding children), and the source file and line number.

Core Web Vitals

The Performance panel highlights Core Web Vitals metrics in the recording: Largest Contentful Paint (LCP), First Input Delay (FID) or Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). These metrics directly impact your search ranking and user experience. The panel marks the exact moment each metric is measured and provides diagnostic information about what caused the measured value.

Application Panel

The Application panel provides access to browser storage mechanisms and service workers. It is the tool you use to inspect and manage cookies, localStorage, sessionStorage, IndexedDB, Cache Storage, and service worker registrations.

Storage Inspection

Under the Storage section in the left sidebar, you can browse and edit:

• Local Storage: key-value pairs persisted across browser sessions. Click any entry to edit its value.
• Session Storage: key-value pairs cleared when the tab closes.
• Cookies: all cookies for the current domain, including HttpOnly, Secure, SameSite, and expiration attributes.
• IndexedDB: structured client-side databases. You can browse object stores, view records, and clear databases.
• Cache Storage: resources cached by service workers. Useful for debugging offline functionality and PWA caching strategies.

Service Workers

The Service Workers section shows all registered service workers for the current origin. You can see their status (activated, waiting, installing), manually trigger sync events, push messages, and unregister workers. The "Update on reload" checkbox forces the browser to install a new service worker on every page load, bypassing the normal update cycle. This is essential during development when you are iterating on service worker code.

Manifest

For Progressive Web Apps, the Manifest section parses and displays the web app manifest file. It shows the app name, icons, start URL, display mode, theme color, and any errors in the manifest. This helps you verify that your PWA is configured correctly before submitting it for installability testing.

Lighthouse Audits

Lighthouse is an automated auditing tool integrated into DevTools. It runs a series of tests against the current page and generates a report with scores in five categories: Performance, Accessibility, Best Practices, SEO, and Progressive Web App.

To run a Lighthouse audit, switch to the Lighthouse tab, select the categories you want to audit and the device type (mobile or desktop), then click "Analyze page load." Lighthouse navigates to the page, measures various metrics, and produces a detailed report.

The Performance score is derived from metrics including First Contentful Paint, Largest Contentful Paint, Total Blocking Time, Cumulative Layout Shift, and Speed Index. Each metric shows the measured value, a color indicator (green, orange, or red), and links to documentation about how to improve it.

The Accessibility audit checks for common issues like missing alt attributes, insufficient color contrast, missing form labels, and incorrect ARIA usage. The SEO audit verifies meta tags, crawlability, mobile-friendliness, and structured data. For generating proper meta tags, our Meta Tag Generator creates the required tags in the correct format.

Essential Keyboard Shortcuts

Advanced Tips and Techniques

Command Menu

Press Ctrl+Shift+P / Cmd+Shift+P to open the Command Menu. This is similar to VS Code's command palette. You can search for any DevTools action: switch panels, toggle settings, take screenshots, run snippets, change themes, and more. Some useful commands include "Capture full size screenshot" (screenshots the entire page, not just the viewport), "Show rendering" (opens the Rendering drawer with options for paint flashing, layout shift regions, and FPS meter), and "Disable JavaScript" for testing no-JS fallbacks.

Snippets

The Sources panel has a Snippets tab where you can save and run reusable JavaScript snippets. These persist across DevTools sessions and work on any page. Common use cases include snippets for performance measurement, DOM manipulation, or data extraction. Snippets run in the page context, so they have full access to the DOM and page JavaScript.

Overrides

The Overrides feature in the Sources panel lets you persist changes to network responses across page reloads. Set up a local folder for overrides, then any changes you make to CSS, JavaScript, or HTML files in the Sources panel are saved to that folder and served instead of the network response on subsequent loads. This is useful for testing fixes on production sites without deploying changes.

Network Request Blocking

The Network Request Blocking drawer (open via the Command Menu or the three-dot menu under "More tools") lets you block specific URLs or URL patterns. This is useful for testing how your page handles failed resource loads or for simulating ad-blocker behavior. Enter a URL pattern, and any matching requests will fail with a blocked status.

Remote Debugging

Chrome DevTools supports remote debugging of Android devices. Connect an Android device via USB, enable USB debugging in Developer Options, and navigate to chrome://inspect in your desktop Chrome. You can inspect tabs open on the device, forward ports for localhost testing, and use all DevTools features as if the page were running locally. This is essential for debugging mobile-specific issues.

For minifying JavaScript before deployment, our JS Minifier compresses your code while preserving functionality. When debugging regular expressions, the Regex Tester provides real-time matching with visual feedback.