Chrome DevTools (original) (raw)

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.

DevTools supports a wide range of common web development tasks. Jump ahead on this page and explore some of DevTools' key features. Don't know where to start or your first time using DevTools? Watch an intro to DevTools.

Get AI assistance

Console insights and AI assistance help you debug and fix JavaScript errors, performance, and styling more efficiently.

Understand performance

Get a comprehensive and actionable view of your page's performance.

Inspect resources

Learn how to inspect resources loaded by your page and edit them from your browser.

Analyze network

Analyze and overwrite network requests and responses on the fly.

AI assistance & console insights

Explore how AI innovations in DevTools let you do more, faster.

Get started

Let Gemini help you analyze and improve your website's styling, network, sources, and performance.

Get inspired

Explore use cases for AI assistance in Chrome DevTools and learn how it can support your debugging workflow across styling, performance, and more.

Explore our monthly video series explaining how to use DevTools to solve common web development problems.

Record and analyze a performance trace

Learn how to record a performance trace in DevTools and analyze it to identify and fix performance issues.

Monitor live Core Web Vitals

Debug LCP issues and use CrUX data to see if you're debugging a similar experience to your users

Caching demystified

Dive into the different types of browser cache and how to inspect and manage them in Chrome DevTools!

Freeze screen & inspect disappearing elements

Trying to inspect an element, and “poof” it's gone? It's like your code is playing hide-and-seek with you!

Get performance insights

A wide range of tools to help you measure and optimize different aspects of your runtime performance: the Performance panel, Lighthouse, and more.

Performance tool overview

Learn about all the features in the Performance panel: how to record a performance trace, how to view and analyze the trace, and more.

The future of performance tooling

The Performance panel has been helping developers measure and optimize their runtime performance for the better part of 15 years. Learn how it's evolving going forward.

News & updates

Inspect and edit resources

Feature reference

Learn about all the features in the Sources panel: how to view and edit files, debug JavaScript, and set up a workspace.

Set up a workspace

Workspace lets you to save changes that you make within DevTools to source code that's stored on your computer. Learn how to set up a workspace in your own projects.

Analyze network activity

Network panel

Learn about all the features in the Network panel: inspect response and request bodies, overwrite headers, and more.

Discover all the other features and capabilities in DevTools.