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 Menu A guide on how to open the Command Menu, run commands, open files, see other actions, and more.
- Disable JavaScript Open the Command Menu and run the Disable JavaScript command.
- Keyboard shortcuts The 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 DOM How to view nodes, search for nodes, edit nodes, reference nodes in the Console, break on node changes, and more.
- View the properties of DOM objects View and filter properties of DOM objects.
- View and change CSS Learn how to use Chrome DevTools to view and change a page's CSS.
- Inspect CSS grid Learn how to use Chrome DevTools to view and change CSS grids.
- Inspect and Debug CSS Flexbox Layouts Learn how to use Chrome DevTools to inspect, modify and debug CSS flexbox layouts.
- Inspect and debug CSS container queries Learn how to use Chrome DevTools to inspect, modify, and debug CSS container queries.
- CSS features reference Discover new workflows for viewing and changing CSS in Chrome DevTools.
- Badges reference Toggle various overlays and speed up DOM tree navigation with badges.
- Get started with viewing and changing the DOM
- Console #
- Console overview The main uses of the Chrome DevTools Console are logging messages and running JavaScript.
- Log messages in the Console Learn how to log messages to the Console.
- Run JavaScript in the Console Learn how to run JavaScript in the Console.
- Watch JavaScript values in real-time with Live Expressions If you find yourself typing the same JavaScript expressions into the Console repeatedly, try Live Expressions instead.
- Format and style messages in the Console Learn how to format and style messages in the Console.
- Console features reference A comprehensive reference on every feature and behavior related to the Console UI in Chrome DevTools.
- Console API reference Use the Console API to write messages to the Console.
- Console Utilities API reference A reference of convenience functions available in the Chrome DevTools Console.
- Console overview
- Sources #
- Sources panel overview View and edit files, create Snippets, debug JavaScript, and set up Workspaces in the Sources panel of Chrome DevTools.
- Debug JavaScript Learn how to use Chrome DevTools to find and fix JavaScript bugs.
- Pause your code with breakpoints Learn about all the ways you can pause your code in Chrome DevTools.
- Run snippets of JavaScript Snippets 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 Workspaces Learn how to save changes made within DevTools to disk.
- JavaScript debugging reference Discover new debugging workflows in this comprehensive reference of Chrome DevTools debugging features.
- Sources panel overview
- Network #
- Inspect network activity A tutorial on the most popular network-related features in Chrome DevTools.
- Network features reference A comprehensive reference of Chrome DevTools Network panel features.
- View page resources Organize resources by frame, domain, type, or other criteria.
- Inspect network activity
- Performance #
- Analyze runtime performance Learn how to evaluate runtime performance in Chrome DevTools.
- Performance features reference A reference on all the ways to record and analyze performance in Chrome DevTools.
- Timeline Event Reference The 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 terminology This section describes common terms used in memory analysis, and is applicable to a variety of memory profiling tools for different languages.
- Fix memory problems Learn 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 snapshots Learn how to record heap snapshots with the Chrome DevTools heap profiler and find memory leaks.
- How to Use the Allocation Profiler Tool Use 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 Apps Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.
- View and edit local storage How to view and edit localStorage with the Local Storage pane and the Console.
- View and edit session storage How to view and edit sessionStorage with the Session Storage pane and the Console.
- View and change IndexedDB data How to view and change IndexedDB data with the Application panel and Snippets.
- View Web SQL data How to view Web SQL data from the Application panel of Chrome DevTools.
- View, edit, and delete cookies Learn how to view, edit, and delete a page's HTTP cookies using Chrome DevTools.
- View Cache data How to view Cache data from the Application panel of Chrome DevTools.
- Test back/forward cache Ensure your pages are optimized for back/forward caching.
- Debug background services How to debug Background Fetch, Background Sync, Notifications, Push Messages, and view reports with Chrome DevTools.
- Deprecated: View Application Cache Data With Chrome DevTools How 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 flows Record, replay, measure user flows, and edit their steps with the Recorder panel.
- Recorder features reference A comprehensive reference of Chrome DevTools Recorder panel features.
- Record, replay, and measure user flows
- Rendering #
- Rendering tab overview Discover a collection of options that affect web content rendering.
- Discover issues with rendering performance Spot repainting, layout shifts, layers and tiles, scrolling issues, see rendering statistics and Core Web Vitals.
- Emulate CSS media features Emulate prefers-color-scheme, media type, forced-colors, prefers-contrast, prefers-reduced-motion, color-gamut.
- Apply other effects: enable automatic dark theme, emulate focus, and more Highlight 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 geolocation Open the Sensors tab and select coordinates from the Geolocation list.
- Simulate device orientation Open the Sensors tab and go to the Orientation section.
- Override geolocation
- Emulate Authenticators and Debug WebAuthn in Chrome DevTools.
- Remote debugging #
- Remote debug Android devices Remote debug live content on an Android device from a Windows, Mac, or Linux computer.
- Access local servers Host a site on a development machine web server, and then access the content from an Android device.
- Remote debugging WebViews Debug WebViews in your native Android apps using Chrome Developer Tools.
- Remote debug Android devices
- Accessibility #
- Accessibility features reference A comprehensive reference of accessibility features in Chrome DevTools.
- Make your website more readable Find and fix low contrast text with DevTools.
- Navigate Chrome DevTools with assistive technology A guide on navigating Chrome DevTools using assistive technology like screen readers.
- Track element focus Open the Console, create a Live Expression, and set the expression to document.activeElement.
- Accessibility features reference
- Settings and customization #
- Customize A list of ways you can customize Chrome DevTools.
- Enable dark theme How to turn on the dark theme in Chrome DevTools.
- Change placement: undock, dock to bottom, dock to left How to move Chrome DevTools to the bottom or left of your viewport, or to a separate window.
- Ignore Chrome Extension Scripts Ignore content scripts from Settings > Ignore List.
- Customize