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 Learn what's new

AI assistance, console insights, code suggestions, auto annotations, and more help you debug more efficiently.

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

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

Analyze and overwrite network requests and responses on the fly.

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

Use Gemini to get code suggestions while writing code in the Console and Sources panels.

Understand console messages and errors in DevTools and learn how to fix them - without any copy-pasting.

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.

Learn more on GitHub

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.

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.

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.

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.

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 new DevTools features like CPU throttling calibration to help you base your performance debugging decisions on data from the real world

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

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

Get started

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.

Read tutorial

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

Get started

A hands-on tutorial to guide you through common tasks inside the Network panel.

Read tutorial

Learn how to view and change a page's DOM.

Learn how to view and change a page's CSS.

Track changes to HTML, CSS, and JavaScript.

Log messages and run JavaScript.

Evaluate website performance.

Find memory issues that affect page performance, including memory leaks, and more.

Inspect, modify, and debug web apps, test cache, view storage, and more.

Inspect and modify animations.

Record, replay, measure user flows, and edit their steps.

Discover a collection of options that affect web content rendering.

Inspect and debug saved addresses.

Find and fix problems with your website.

Make sure that a page is fully protected by HTTPS.

View information and debug media players per browser tab.

Emulate device sensors.

Emulate authenticators.