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.
- A list of everything that has been covered in the What's New In DevTools series.
- Learn how the team builds new features in DevTools.
- CSS #
- Learn how to use Chrome DevTools to view and change a page's CSS.
- Discover new workflows for viewing and changing CSS in Chrome DevTools.
- Inspect and modify animations with the Chrome DevTools Animation Inspector.
- Learn how to use Chrome DevTools to view and change a page's CSS.
- Open the Rendering tab and select Emulate CSS media > print.
- How to view nodes, search for nodes, edit nodes, reference nodes in the Console, break on node changes, and more.
- Console #
- The main uses of the Chrome DevTools Console are logging messages and running JavaScript.
- Learn how to log messages to the Console.
- Learn how to run JavaScript in the Console.
- A comprehensive reference on every feature and behavior related to the Console UI in Chrome DevTools.
- Use the Console API to write messages to the Console.
- A reference of convenience functions available in the Chrome DevTools Console.
- If you find yourself typing the same JavaScript expressions into the Console repeatedly, try Live Expressions instead.
- How to find and analyze unused JavaScript and CSS code in Chrome DevTools.
- Network #
- A tutorial on the most popular network-related features in Chrome DevTools.
- A comprehensive reference of Chrome DevTools Network panel features.
- Storage #
- Learn how to view, edit, and delete a page's HTTP cookies using Chrome DevTools.
- How to view and edit localStorage with the Local Storage pane and the Console.
- How to view and change IndexedDB data with the Application panel and Snippets.
- How to view and edit sessionStorage with the Session Storage pane and the Console.
- How to view Application Cache data from the Application panel of Chrome DevTools.
- How to view Web SQL data from the Application panel of Chrome DevTools.
- How to view Cache data from the Application panel of Chrome DevTools.
- Use the Issues Tab to find and fix problems with your website.
- A guide on how to open the Command Menu, run commands, see other actions, and more.
- Mobile simulation #
- Use virtual devices in Chrome's Device Mode to build mobile-first websites.
- Open the Network conditions tab, disable Select automatically, and choose from the list or enter a custom string.
- Open the Sensors tab and select coordinates from the Geolocation list.
- Open the Sensors tab and go to the Orientation section.
- JavaScript #
- Learn how to use Chrome DevTools to find and fix JavaScript bugs.
- Learn about all the ways you can pause your code in Chrome DevTools.
- Discover new debugging workflows in this comprehensive reference of Chrome DevTools debugging features.
- 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.
- View and edit files, create Snippets, debug JavaScript, and set up Workspaces in the Sources panel of Chrome DevTools.
- How to debug Background Fetch, Background Sync, Notifications, and Push Messages with Chrome DevTools.
- Enable Blackbox content scripts from Settings > Blackboxing.
- Open the Command Menu and run the Disable JavaScript command.
- Performance #
- Learn how to evaluate runtime performance in Chrome DevTools.
- Learn how to use Chrome DevTools to find ways to make your websites load faster.
- A reference on all the ways to record and analyze performance in Chrome DevTools.
- 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.
- Accessibility #
- A comprehensive reference of accessibility features in Chrome DevTools.
- A guide on navigating Chrome DevTools using assistive technology like screen readers.
- Open the Console, create a Live Expression, and set the expression to document.activeElement.
- Remote debugging #
- Remote debug live content on an Android device from a Windows, Mac, or Linux computer.
- Host a site on a development machine web server, and then access the content from an Android device.
- Debug WebViews in your native Android apps using Chrome Developer Tools.
- Memory #
- Use the Memory inspector to inspect an ArrayBuffer in JavaScript, as well as a WebAssembly.Memory
- Learn how to use Chrome and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.
- This section describes common terms used in memory analysis, and is applicable to a variety of memory profiling tools for different languages.
- Learn how to record heap snapshots with the Chrome DevTools heap profiler and find memory leaks.
- Use the allocation profiler tool to find objects that aren't being properly garbage collected, and continue to retain memory.
- Use the Media Panel to view information and debug the media players per browser tab.
- Emulate Authenticators and Debug WebAuthn in Chrome DevTools.
- Learn how to save changes made within DevTools to disk.
- Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.
- Use the Security Panel to make sure that a page is fully protected by HTTPS.
- The canonical documentation for Chrome DevTools keyboard shortcuts.
- Organize resources by frame, domain, type, or other criteria.
- Customization #
- A list of ways you can customize Chrome DevTools.
- How to turn on the dark theme in Chrome DevTools.
- How to move Chrome DevTools to the bottom or left of your viewport, or to a separate window.