Chrome DevTools (original) (raw)

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.

Debug with AI

AI assistance, console insights, code suggestions, auto annotations, and more help you debug 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.

Debug with AI

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

DevTools MCP

Give your coding agents the same trusted tools you use to inspect network activity, record traces, and troubleshoot web applications, within your AI workflow.

Connect the Chrome DevTools MCP (Model Context Protocol) server to your tool of choice: Gemini CLI, Claude Code, Cline, Copilot, and more.

Explore our monthly video series taking you through common debugging scenarios in DevTools in a playful way.

Performance optimization Pitstop

Get a tour through the updated Performance panel, showing you how to measure Core Web Vitals (LCP, CLS, INP) and how to get tailored advice from Gemini.

Pixel Pirate

Set sail with DevTools and become a debugging pirate! Discover techniques for emulating focus styles, testing forms with autofill, and resolving backend errors with network overrides.

AI innovations

Explore the power of Al-assisted debugging with Chrome DevTools! Discover how Console Insights, Al assistance for styling, performance, network, and sources can supercharge your workflow.

Advanced Network Analysis with Chrome DevTools

Explore advanced Network panel techniques, including how to find performance bottlenecks, debug popups, configure network conditions, use shortcuts to determine network request initiators and more.

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.

Learn about the new performance insights, the power of Lighthouse directly in the DevTools Performance panel.

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.