Chrome DevTools
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.
- Get started with Google Chrome's built-in web developer tools.
- All of the ways that you can open Chrome DevTools.
- Stay up to date with the latest DevTools changes.
- Learn how the team builds new features in DevTools.
- Commands and shortcuts #
- Run commands in the Command MenuA guide on how to open the Command Menu, run commands, open files, see other actions, and more.
- Disable JavaScriptOpen the Command Menu and run the Disable JavaScript command.
- Keyboard shortcutsThe canonical documentation for Chrome DevTools keyboard shortcuts.
- Run commands in the Command Menu
- Use virtual devices in Chrome's Device Mode to build mobile-first websites.
- Elements #
- Get started with viewing and changing the DOMHow to view nodes, search for nodes, edit nodes, reference nodes in the Console, break on node changes, and more.
- View the properties of DOM objectsView and filter properties of DOM objects.
- View and change CSSLearn how to use Chrome DevTools to view and change a page's CSS.
- Inspect CSS gridLearn how to use Chrome DevTools to view and change CSS grids.
- Inspect and Debug CSS Flexbox LayoutsLearn how to use Chrome DevTools to inspect, modify and debug CSS flexbox layouts.
- Inspect and debug CSS container queriesLearn how to use Chrome DevTools to inspect, modify, and debug CSS container queries.
- CSS features referenceDiscover new workflows for viewing and changing CSS in Chrome DevTools.
- Badges referenceToggle various overlays and speed up DOM tree navigation with badges.
- Get started with viewing and changing the DOM
- Console #
- Console overviewThe main uses of the Chrome DevTools Console are logging messages and running JavaScript.
- Log messages in the ConsoleLearn how to log messages to the Console.
- Run JavaScript in the ConsoleLearn how to run JavaScript in the Console.
- Watch JavaScript values in real-time with Live ExpressionsIf you find yourself typing the same JavaScript expressions into the Console repeatedly, try Live Expressions instead.
- Format and style messages in the ConsoleLearn how to format and style messages in the Console.
- Console features referenceA comprehensive reference on every feature and behavior related to the Console UI in Chrome DevTools.
- Console API referenceUse the Console API to write messages to the Console.
- Console Utilities API referenceA reference of convenience functions available in the Chrome DevTools Console.
- Console overview
- Sources #
- Sources panel overviewView and edit files, create Snippets, debug JavaScript, and set up Workspaces in the Sources panel of Chrome DevTools.
- Debug JavaScriptLearn how to use Chrome DevTools to find and fix JavaScript bugs.
- Pause your code with breakpointsLearn about all the ways you can pause your code in Chrome DevTools.
- Run snippets of JavaScriptSnippets are small scripts that you can author and execute within the Sources panel of Chrome DevTools. You can access and run them from any page. When you run a snippet, it executes from the context of the currently open page.
- Edit and save files with WorkspacesLearn how to save changes made within DevTools to disk.
- JavaScript debugging referenceDiscover new debugging workflows in this comprehensive reference of Chrome DevTools debugging features.
- Sources panel overview
- Network #
- Inspect network activityA tutorial on the most popular network-related features in Chrome DevTools.
- Network features referenceA comprehensive reference of Chrome DevTools Network panel features.
- View page resourcesOrganize resources by frame, domain, type, or other criteria.
- Inspect network activity
- Performance #
- Analyze runtime performanceLearn how to evaluate runtime performance in Chrome DevTools.
- Performance features referenceA reference on all the ways to record and analyze performance in Chrome DevTools.
- Timeline Event ReferenceThe timeline events mode displays all events triggered while making a recording. Use the timeline event reference to learn more about each timeline event type.
- Analyze runtime performance
- Get actionable insights on your website's performance with the Performance insights panel.
- Memory #
- Memory terminologyThis section describes common terms used in memory analysis, and is applicable to a variety of memory profiling tools for different languages.
- Fix memory problemsLearn how to use Chrome and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.
- Record heap snapshotsLearn how to record heap snapshots with the Chrome DevTools heap profiler and find memory leaks.
- How to Use the Allocation Profiler ToolUse the allocation profiler tool to find objects that aren't being properly garbage collected, and continue to retain memory.
- Memory terminology
- Application #
- Debug Progressive Web AppsUse the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.
- View and edit local storageHow to view and edit localStorage with the Local Storage pane and the Console.
- View and edit session storageHow to view and edit sessionStorage with the Session Storage pane and the Console.
- View and change IndexedDB dataHow to view and change IndexedDB data with the Application panel and Snippets.
- View Web SQL dataHow to view Web SQL data from the Application panel of Chrome DevTools.
- View, edit, and delete cookiesLearn how to view, edit, and delete a page's HTTP cookies using Chrome DevTools.
- View Cache dataHow to view Cache data from the Application panel of Chrome DevTools.
- Test back/forward cacheEnsure your pages are optimized for back/forward caching.
- Debug background servicesHow to debug Background Fetch, Background Sync, Notifications, Push Messages, and view reports with Chrome DevTools.
- Deprecated: View Application Cache Data With Chrome DevToolsHow to view Application Cache data from the Application panel of Chrome DevTools.
- Debug Progressive Web Apps
- Inspect and modify animations with the Animations tab.
- Track changes to HTML, CSS, and JavaScript.
- How to find and analyze unused JavaScript and CSS code in Chrome DevTools.
- Identify potential CSS improvements with the CSS Overview panel.
- Use the Issues Tab to find and fix problems with your website.
- Use the Media Panel to view information and debug the media players per browser tab.
- Use the Memory inspector to inspect an ArrayBuffer, TypedArray, or DataView in JavaScript as well as WebAssembly.Memory of C++ Wasm apps.
- Open the Network conditions tab, disable Select automatically, and choose from the list or enter a custom string.
- Recorder #
- Record, replay, and measure user flowsRecord, replay, measure user flows, and edit their steps with the Recorder panel.
- Recorder features referenceA comprehensive reference of Chrome DevTools Recorder panel features.
- Record, replay, and measure user flows
- Rendering #
- Rendering tab overviewDiscover a collection of options that affect web content rendering.
- Discover issues with rendering performanceSpot repainting, layout shifts, layers and tiles, scrolling issues, see rendering statistics and Core Web Vitals.
- Emulate CSS media featuresEmulate prefers-color-scheme, media type, forced-colors, prefers-contrast, prefers-reduced-motion, color-gamut.
- Apply other effects: enable automatic dark theme, emulate focus, and moreHighlight ad frames, emulate focus on a page, disable local fonts and image formats, enable an automatic dark theme, and emulate vision deficiencies.
- Rendering tab overview
- Use the Security Panel to make sure that a page is fully protected by HTTPS.
- Find text across all loaded resources with the Search tab.
- Sensors #
- Override geolocationOpen the Sensors tab and select coordinates from the Geolocation list.
- Simulate device orientationOpen the Sensors tab and go to the Orientation section.
- Override geolocation
- Emulate Authenticators and Debug WebAuthn in Chrome DevTools.
- Remote debugging #
- Remote debug Android devicesRemote debug live content on an Android device from a Windows, Mac, or Linux computer.
- Access local serversHost a site on a development machine web server, and then access the content from an Android device.
- Remote debugging WebViewsDebug WebViews in your native Android apps using Chrome Developer Tools.
- Remote debug Android devices
- Accessibility #
- Accessibility features referenceA comprehensive reference of accessibility features in Chrome DevTools.
- Make your website more readableFind and fix low contrast text with DevTools.
- Navigate Chrome DevTools with assistive technologyA guide on navigating Chrome DevTools using assistive technology like screen readers.
- Track element focusOpen the Console, create a Live Expression, and set the expression to document.activeElement.
- Accessibility features reference
- Settings and customization #
- CustomizeA list of ways you can customize Chrome DevTools.
- Enable dark themeHow to turn on the dark theme in Chrome DevTools.
- Change placement: undock, dock to bottom, dock to leftHow to move Chrome DevTools to the bottom or left of your viewport, or to a separate window.
- Ignore Chrome Extension ScriptsIgnore content scripts from Settings > Ignore List.
- Customize