Sofia Emelianova
Technical Writer, Google Chrome
What's new in DevTools (Chrome 120)
Third-party cookie phaseout issues reported in the Issues panel, Privacy Sandbox Analysis Tool for cookies, effective Content Security Policy in the Applications panel, improved animations debugging, enhanced ignore listing, and more.
What's New in DevTools (Chrome 119)
Improved @property section in Styles, updated devices list, enhanced pretty-printing in Sources and autocompletion in the Console.
What's New in DevTools (Chrome 118)
New section for custom properties in Elements > Styles, more local overrides improvements, enhanced search, streamlined workspace in Sources, and more.
DevTools Tips: Snippets and live expressions
Use Snippets to run code you frequently use and live expressions to watch values in real time.
What's New in DevTools (Chrome 117)
Override XHR/fetch requests and hide extension requests from the Network panel, see changes in fetch priority in the Performance panel, experience multiple UI improvements, check out new colors and experimental features, and more.
DevTools Tips: Record and replay user flows with the Recorder
Learn how to record, replay, and debug user flows with the Recorder panel in DevTools.
DevTools Tips: Local and session storage
Use Application > Local Storage and Session Storage to debug key-value pairs.
DevTools Tips: Source maps in DevTools
Use source maps in DevTools to debug your original code instead of deployed.
Developer Resources: View and manually load source maps
Use the Developer Resources drawer tab to check if source maps load successfully and load them manually.
Override web content and HTTP response headers locally
Use local overrides to mock remote resources and keep the changes you make in DevTools across page loads.
DevTools Tips: What are source maps?
Learn how source maps can help you debug your original code instead of deployed.
Inspect and debug HD and non-HD colors with the Color Picker
Learn how to use the Color Picker in Elements > Styles to inspect and debug HD and non-HD colors.
DevTools Tips: Discover CSS issues
Use the Styles and Computed panes to discover CSS issues with DevTools.
Customize the Recorder with extensions
Customize and integrate the Recorder by installing extensions.
DevTools Tips: Identify CSS improvelements
Use the CSS Overview panel to identify potential CSS improvements.
DevTools Tips: Faster DevTools navigation
Learn how to speed up your workflow with faster DevTools navigation using shortcuts and settings.
DevTools Tips: Discover and fix low contrast text
Learn how to use Chrome DevTools to discover and fix low contrast text.
DevTools Tips: Edit, debug, and export user flow recordings
Use the Recorder panel and its extensions to edit, debug, and export user flow recordings.
DevTools Tips: How to inspect and debug CSS flexbox
Learn how to use Chrome DevTools to inspect, modify, and debug CSS flexbox layouts.
DevTools Tips: How to speed up your workflow with Console shortcuts
Use the shortcuts provided by the Console Utilities API to quickly refer to recent elements, query objects, monitor events and function calls, and more.
DevTools Tips: How to inspect CSS grid
Learn how to use Chrome DevTools to view and change CSS grid layouts.
DevTools Tips: How to inspect and modify CSS animations
Use the Animations tab to inspect and modify CSS animations, transitions, and more.
DevTools Tips: Get actionable insights on your website's performance
Get actionable insights on your website's performance with the new Performance insights panel
DevTools Tips: How to log messages in the Console
Use the Console to log variables, objects, and messages, filter and group the messages, and more.
DevTools Tips: How to emulate CSS user preference media features with DevTools
Use the Rendering tab to emulate user's preferences and test the user-adaptive behavior of your website.
DevTools Tips: How to inspect CSS container queries
Inspect and debug CSS container queries with DevTools.
Inspect and debug CSS container queries
Learn how to use Chrome DevTools to inspect, modify, and debug CSS container queries.
Accessibility features reference
A comprehensive reference of accessibility features in Chrome DevTools.
Search: Find text across all loaded resources
Find text across all loaded resources with the Search tab.
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.
Emulate CSS media features
Emulate prefers-color-scheme, media type, forced-colors, prefers-contrast, prefers-reduced-motion, color-gamut.
Discover issues with rendering performance
Spot repainting, layout shifts, layers and tiles, scrolling issues, see rendering statistics and Core Web Vitals.
Performance insights: Get actionable insights on your website's performance
Get actionable insights on your website's performance with the Performance insights panel.
Record, replay, and measure user flows
Record, replay, measure user flows, and edit their steps with the Recorder panel.
Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory.
Use the Memory inspector to inspect an ArrayBuffer, TypedArray, or DataView in JavaScript as well as WebAssembly.Memory of C++ Wasm apps.
Debug background services
View reports and debug background services, such as Background Fetch, Background Sync, Notifications, Push Messages, and more.
Customize DevTools
A list of ways you can customize Chrome DevTools: Change theme, placement, panel order, language, and more.
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.
Console features reference
A comprehensive reference on every feature and behavior related to the Console UI in Chrome DevTools.
Run commands in the Command Menu
A guide on how to open the Command Menu, run commands, open files, see other actions, and more.
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.
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.
Sensors: Emulate device sensors
Use the Sensors tab to override geolocation, simulate device orientation, force touch, and emulate idle state.
Lighthouse: Optimize website speed
Learn how to use Chrome DevTools to find ways to make your websites load faster.
Edit and save files in a workspace
Learn how to save changes made within DevTools to your source files.
Sources panel overview
View and edit files, create Snippets, debug JavaScript, and set up Workspaces in the Sources panel of Chrome DevTools.
Performance features reference
A reference on all the ways to record and analyze performance in Chrome DevTools.
Pause your code with breakpoints
Learn about all the ways you can pause your code in Chrome DevTools.
JavaScript debugging reference
Discover new debugging workflows in this comprehensive reference of Chrome DevTools debugging features.
Debug Progressive Web Apps
Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.
Animations: Inspect and modify CSS animation effects
Inspect and modify animations with the Animations tab.
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.
View, add, edit, and delete cookies
Learn how to view, add, edit, and delete a page's HTTP cookies using Chrome DevTools.
Console Utilities API reference
A reference of convenience functions available in the Chrome DevTools Console.
Simulate mobile devices with Device Mode
Use virtual devices in Chrome's Device Mode to build mobile-first websites.
Debug your original code instead of deployed with source maps
Keep your client-side code readable and debuggable even after you've combined, minified, or compiled it.
Remote debug Android devices
Remote debug live content on an Android device from a Windows, Mac, or Linux computer.