Chrome DevTools – OFFICIAL DOCS

Chrome DevTools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.

  • Overview

    Get started with Google Chrome’s built-in web developer tools.

  • Open Chrome DevTools

    All of the ways that you can open Chrome DevTools.

  • What’s new in DevTools

    Stay up to date with the latest DevTools changes.

  • Engineering blog

    Learn how the team builds new features in DevTools.

  • CSS#

    •  View and change CSS

      Learn how to use Chrome DevTools to view and change a page’s CSS.

    •  CSS features reference

      Discover new workflows for viewing and changing CSS in Chrome DevTools.

    •  Inspect animations

      Inspect and modify animations with the Chrome DevTools Animation Inspector.

    •  Inspect CSS Grid

      Learn how to use Chrome DevTools to view and change a page’s CSS.

    •  Force print preview mode

      Open the Rendering tab and select Emulate CSS media > print.

  • 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.

  • 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.

    •  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.

    •  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.

  • Find Unused JavaScript And CSS With The Coverage Tab

    How to find and analyze unused JavaScript and CSS code in Chrome DevTools.

  • 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.

  • Storage#

    •  View, edit, and delete cookies

      Learn how to view, edit, and delete a page’s HTTP cookies using Chrome DevTools.

    •  View and edit local storage

      How to view and edit localStorage with the Local Storage pane and the Console.

    •  View and change IndexedDB data

      How to view and change IndexedDB data with the Application panel and Snippets.

    •  View and edit session storage

      How to view and edit sessionStorage with the Session Storage pane and the Console.

    •  View Application Cache Data With Chrome DevTools

      How to view Application Cache data from the Application panel of Chrome DevTools.

    •  View Web SQL data

      How to view Web SQL data from the Application panel of Chrome DevTools.

    •  View Cache data

      How to view Cache data from the Application panel of Chrome DevTools.

  • Find and fix problems with the Issues tab

    Use the Issues Tab to find and fix problems with your website.

  • Run commands in the Command Menu

    A guide on how to open the Command Menu, run commands, see other actions, and more.

  • Mobile simulation#

    •  Simulate mobile devices with Device Mode

      Use virtual devices in Chrome’s Device Mode to build mobile-first websites.

    •  Override the user agent string

      Open the Network conditions tab, disable Select automatically, and choose from the list or enter a custom string.

    •  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.

  • JavaScript#

    •  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.

    •  JavaScript debugging reference

      Discover new debugging workflows in this comprehensive reference of Chrome DevTools debugging features.

    •  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.

    •  Sources panel overview

      View and edit files, create Snippets, debug JavaScript, and set up Workspaces in the Sources panel of Chrome DevTools.

    •  Debug background services

      How to debug Background Fetch, Background Sync, Notifications, and Push Messages with Chrome DevTools.

    •  Ignore Chrome Extension Scripts

      Ignore content scripts from Settings > Ignore List.

    •  Disable JavaScript

      Open the Command Menu and run the Disable JavaScript command.

  • Performance#

    •  Analyze runtime performance

      Learn how to evaluate runtime performance in Chrome DevTools.

    •  Optimize website speed

      Learn how to use Chrome DevTools to find ways to make your websites load faster.

    •  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.

  • Accessibility#

    •  Accessibility features reference

      A comprehensive reference of accessibility features in Chrome 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.

  • 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.

  • Memory#

    •  Inspect JavaScript ArrayBuffer with the Memory inspector

      Use the Memory inspector to inspect an ArrayBuffer in JavaScript, as well as a WebAssembly.Memory

    •  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.

    •  Memory terminology

      This section describes common terms used in memory analysis, and is applicable to a variety of memory profiling tools for different languages.

    •  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.

  • View and debug media players information

    Use the Media Panel to view information and debug the media players per browser tab.

  • Emulate authenticators and debug WebAuthn

    Emulate Authenticators and Debug WebAuthn in Chrome DevTools.

  • Edit files with Workspaces

    Learn how to save changes made within DevTools to disk.

  • Debug Progressive Web Apps

    Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.

  • Understand security issues

    Use the Security Panel to make sure that a page is fully protected by HTTPS.

  • Keyboard shortcuts

    The canonical documentation for Chrome DevTools keyboard shortcuts.

  • View page resources

    Organize resources by frame, domain, type, or other criteria.

  • Customization#

    •  Customization

      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.