Home Docs DevTools Stay organized with collections Save and categorize content based on your preferences. DevTools Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools lets you edit pages on-the-fly and diagnose problems quickly, which helps you build better websites, faster. Get started Open DevTools All of the ways that you can open Chrome DevTools. article What's new in DevTools Stay up to date with the latest DevTools changes. video_library DevTools Tips A series of bite-size videos to help you to learn features in DevTools. Commands and shortcuts Quickly accomplish tasks. Run commands in the command menu Open the command menu, run commands, open files, see other actions, and more. Read the doc Keyboard shortcuts A comprehensive reference of keyboard shortcuts. Read the doc Disable JavaScript See how a web page looks and behaves when JavaScript is disabled. Read the doc article Simulate mobile devices with device mode Simulate devices to build mobile-first websites. article Search across loaded resources Find text across all loaded resources with the Search panel. Panels Discover the power of each DevTools panel. Elements - DOM Learn how to view and change a page's DOM. Read the docs Elements - CSS Learn how to view and change a page's CSS. Read the docs Console Log messages and run JavaScript. Read the docs Sources View and edit files, create snippets, debug JavaScript, and set up a workspace. Read the docs Network Log network requests. Read the docs Performance Evaluate website performance. Read the docs Memory Find memory issues that affect page performance, including memory leaks, and more. Read the docs Application Inspect, modify, and debug web apps, test cache, view storage, and more. Read the docs Recorder Record, replay, measure user flows, and edit their steps. Read the docs Rendering Discover a collection of options that affect web content rendering. Read the docs article Autofill Inspect and debug saved addresses. article Issues Find and fix problems with your website. article Security Make sure that a page is fully protected by HTTPS. article Memory inspector Inspect an ArrayBuffer, TypedArray, or DataView in JavaScript, as well as WebAssembly and memory of C++ Wasm apps. article Network conditions Override the user agent string. article Media View information and debug media players per browser tab. article Animations Inspect and modify animations. article Changes Track changes to HTML, CSS, and JavaScript. article Coverage Find and analyze unused JavaScript and CSS code. article Developer resources Check if source maps load successfully and load them manually. article CSS Overview Identify potential CSS improvements. article Lighthouse Optimize website speed with the Lighthouse panel. article Performance insights Get actionable insights on your website's performance. article Sensors Emulate device sensors. article WebAuthn Emulate authenticators. Settings reference article Overview article Preferences article Workspace article Experiments article Ignore list article Devices article Throttling article Locations article Shortcuts