Chrome DevTools
Discover DevTools
The DevTools UI can be a little overwhelming... there's so many tabs! But, if you take some time to get familiar with each tab to understand what's possible, you may discover that DevTools can seriously boost your productivity.Note: In the DevTools docs, the top-level tabs are callee DevTools
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you diagnose problems quickly, which ultimately helps you build better websites, faster.With DevTools you can view and change any page, even the Google homepage, as the video demonstrates.
Get started
Here are the recommended starting points for some of the most common ways that DevTools can help you build websites faster:
- Viewing and changing a page's styles. Every developer goes through this experience: you code some CSS, and then you view your page and... the styles aren't being applied. Or, they look way different than you expect. This tutorial shows you how to use DevTools to see how the browser is actually applying styles to HTML elements. It also shows you how to change styles from DevTools, which applies the changes immediately without needing to reload the page.
- Debugging JavaScript. The first way that most developers learn how to debug is to sprinkle
console.log()commands throughout their code, in order to infer where the code is going wrong. This tutorial shows you how to set breakpoints in DevTools, which lets you pause in the middle of a page's execution and step through the code one line at a time. While you're paused, you can inspect (and even change) the current values of variables at that point in time. You may find that this workflow helps you debug issues much faster than theconsole.log()method. - Viewing messages and running JavaScript in the Console. The Console provides a chronological log of messages that give you more information about whether a page is running correctly. These messages come from the developers who built the page, or from the browser. You can also run JavaScript from the Console in order to inspect how a page is built, or experiment with changing how the page runs.
- Analyzing runtime performance. If your page is slow or janky, you can use DevTools to record everything that happens on the page, and then analyze the results to learn how to optimize the page's performance.
Browse the DevTools docs to learn about all the other things that DevTools can do for you. The docs are organized by common tasks.See Join the DevTools community to learn about all the ways that you can get help with how to use DevTools, or help others. If you ever have ideas on how to improve these docs or the DevTools product itself, the DevTools team would love to hear your feedback!
Discover DevTools
The DevTools UI can be a little overwhelming... there's so many tabs! But, if you take some time to get familiar with each tab to understand what's possible, you may discover that DevTools can seriously boost your productivity.Note: In the DevTools docs, the top-level tabs are called panels.
Device Mode
Build fully responsive, mobile-first web experiences.
- Device Mode
- Test Responsive and Device-specific Viewports
- Emulate Sensors: Geolocation & Accelerometer
Elements panel
Iterate on the layout and design of your site by freely manipulating the DOM and CSS.
- Get Started With Viewing And Changing CSS
- Inspect and Tweak Your Pages
- Edit Styles
- Edit the DOM
- Inspect Animations
Console panel
Log diagnostic information during development or interact with the JavaScript on the page.
Log diagnostic information during development or interact with the JavaScript on the page.
Sources panel
Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor.
- Get Started With Debugging JavaScript
- Pause Your Code With Breakpoints
- Set Up Persistence with DevTools Workspaces
- Run Snippets Of Code From Any Page
- JavaScript Debugging Reference
Network panel
Optimize page load performance and debug request issues.
Performance panel
Note: In Chrome 58 the Timeline panel was renamed to the Performance panel.Improve the runtime performance of your page by recording and exploring the various events that happen during the lifecycle of a site.
- Get Started With Analyzing Runtime Performance
- Performance Analysis Reference
- Analyze runtime performance
- Diagnose Forced Synchronous Layouts
Memory panel
Note: In Chrome 58 the Profiles panel was renamed to the Memory panel.Profile memory usage and track down leaks.
Application panel
Inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.
- Debug Progressive Web Apps
- Inspect and Manage Storage, Databases, and Caches
- Inspect and Delete Cookies
- Inspect Resources
Security panel
Debug mixed content issues, certificate problems, and more.
Join the DevTools community
The best place to file feature requests for Chrome DevTools is the mailing list. The team needs to understand use cases, gauge community interest, and discuss feasibility before implementing any new features.MAILING LISTFile bug reports in Crbug, which is the engineering team's bug tracker.CRBUGIf you want to alert us to a bug or feature request but don't have much time, you're welcome to send a tweet to @ChromeDevTools. We reply and send announcements from the account regularly.TWITTERFor help with using DevTools, Stack Overflow is the best channel.STACK OVERFLOWTo file bugs or feature requests on the DevTools docs, open a GitHub issue on the Web Fundamentals repository.DOCS ISSUESDevTools also has a Slack channel, but the team doesn't monitor it consistently.SLACKExcept as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.Last updated March 9, 2018.