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
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.
Console insights and AI assistance help you debug and fix JavaScript errors, performance, and styling 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.

AI assistance & console insights

Explore how AI innovations in DevTools let you do more, faster.
Let Gemini help you analyze and improve your website's styling, network, sources, and performance.
Explore use cases for AI assistance in Chrome DevTools and learn how it can support your debugging workflow across styling, performance, and more.
Understand console messages and errors in DevTools and learn how to fix them - without any copy-pasting.

DevTools Tips

Explore our monthly video series explaining how to use DevTools to solve common web development problems.
Learn how to record a performance trace in DevTools and analyze it to identify and fix performance issues.
Debug LCP issues and use CrUX data to see if you're debugging a similar experience to your users
Dive into the different types of browser cache and how to inspect and manage them in Chrome DevTools!
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.
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 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.
Annotate traces in place and save them directly within the trace file for straightforward sharing.

News & updates

Proses debug performa DevTools yang lebih akurat menggunakan data dunia nyata

Updated April 4, 2025

Pelajari fitur DevTools baru seperti kalibrasi throttling CPU untuk membantu Anda mendasarkan keputusan proses debug performa pada data dari dunia nyata

Sidebar Insight di panel Performa DevTools

Updated April 2, 2025

Pelajari insight performa baru, kecanggihan Lighthouse langsung di panel Performa DevTools.

Navigasi dan pemfilteran yang lebih baik di panel Performa DevTools

Updated March 19, 2025

Pembaruan panel Performa DevTools mempermudah navigasi dalam dan pemfilteran rekaman aktivitas.

Inspect and edit resources

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

Analyze network activity

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

More tools

Discover all the other features and capabilities in DevTools.
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.