Chrome DevTools is a set of web developer tools built directly into the [Google Chrome](https://www.google.com/chrome/) browser.
DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps
you build better websites, faster.
[Video](https://www.youtube.com/watch?v=t1c5tNPpXjs)
Check out the video for live demonstrations of core DevTools workflows, including debugging CSS,
prototyping CSS, debugging JavaScript, and analyzing load performance.
## Open DevTools
There are many ways to open DevTools, because different users want quick access to different parts
of the DevTools UI.
- To work with the DOM or CSS, right-click an element on the page and select **Inspect** to jump into the **Elements** panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).
- To see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, ChromeOS) to jump straight into the **Console** panel.
See [Open Chrome DevTools](https://developer.chrome.com/docs/devtools/open.md.txt) for more details and workflows.
## Get started
If you're a more experienced web developer, here are the recommended starting points for learning
how DevTools can improve your productivity:
- [View and change the DOM](https://developer.chrome.com/docs/devtools/dom.md.txt)
- [View and change CSS](https://developer.chrome.com/docs/devtools/css.md.txt)
- [Debug JavaScript](https://developer.chrome.com/docs/devtools/javascript.md.txt)
- [View messages and run JavaScript in the Console](https://developer.chrome.com/docs/devtools/console.md.txt)
- [Optimize website speed](https://developer.chrome.com/docs/devtools/speed/get-started)
- [Inspect network activity](https://developer.chrome.com/docs/devtools/network.md.txt)
## Discover DevTools
The DevTools UI can be a little overwhelming... there are 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]
> **Note:** In the DevTools docs, the top-level tabs are called panels.
### Device Mode
Simulate mobile devices.
- [Device mode](https://developer.chrome.com/docs/devtools/device-mode.md.txt)
- [Emulate device sensors](https://developer.chrome.com/docs/devtools/sensors.md.txt)
### Elements panel
View and change the DOM and CSS.
- [Get started with viewing and changing the DOM](https://developer.chrome.com/docs/devtools/dom.md.txt)
- [Get started with viewing and changing CSS](https://developer.chrome.com/docs/devtools/css.md.txt)
- [Edit CSS](https://developer.chrome.com/docs/devtools/css/reference.md.txt#change)
- [Edit the DOM](https://developer.chrome.com/docs/devtools/dom.md.txt#edit)
- [Find invalid, overridden, inactive, and other CSS](https://developer.chrome.com/docs/devtools/css/issues.md.txt)
- [Identify potential CSS improvements](https://developer.chrome.com/docs/devtools/css-overview.md.txt)
- [Emulate light/dark themes, contrast, and other CSS media features](https://developer.chrome.com/docs/devtools/rendering.md.txt)
- [Find unused CSS](https://developer.chrome.com/docs/devtools/coverage.md.txt)
- [Inspect animations](https://developer.chrome.com/docs/devtools/css/animations.md.txt)
### Console panel
View messages and run JavaScript from the Console.
- [Get started with the Console](https://developer.chrome.com/docs/devtools/console.md.txt)
- [Console Utilities API reference](https://developer.chrome.com/docs/devtools/console/utilities.md.txt)
- [Console API reference](https://developer.chrome.com/docs/devtools/console/api.md.txt)
### Sources panel
Debug JavaScript, persist changes made in DevTools across page reloads, save and run snippets of
JavaScript, and save changes that you make in DevTools to local sources.
- [Get started with debugging JavaScript](https://developer.chrome.com/docs/devtools/javascript.md.txt)
- [Pause your code with breakpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints.md.txt)
- [Edit and save files in a workspace](https://developer.chrome.com/docs/devtools/workspaces.md.txt)
- [Run snippets of JavaScript](https://developer.chrome.com/docs/devtools/javascript/snippets.md.txt)
- [JavaScript debugging reference](https://developer.chrome.com/docs/devtools/javascript/reference.md.txt)
- [Override web content and HTTP response headers locally](https://developer.chrome.com/docs/devtools/overrides.md.txt)
### Network panel
View and debug network activity.
- [Inspect network activity](https://developer.chrome.com/docs/devtools/network.md.txt)
- [Network features reference](https://developer.chrome.com/docs/devtools/network/reference.md.txt)
- [View page resources](https://developer.chrome.com/docs/devtools/resources.md.txt)
### Recorder panel
Record, replay, and measure user flows.
- [Record, replay, and measure user flows](https://developer.chrome.com/docs/devtools/recorder.md.txt)
- [Customize the Recorder with extensions](https://developer.chrome.com/docs/devtools/recorder/extensions.md.txt)
- [Recorder features reference](https://developer.chrome.com/docs/devtools/recorder/reference.md.txt)
### Performance panel
Find ways to improve load and runtime performance.
- [Optimize website speed](https://developer.chrome.com/docs/devtools/speed/get-started)
- [Analyze runtime performance](https://developer.chrome.com/docs/devtools/evaluate-performance)
- [Performance features reference](https://developer.chrome.com/docs/devtools/evaluate-performance/reference)
### Memory panel
Find and fix memory issues that affect page performance, for example, memory leaks.
- [Fix memory problems](https://developer.chrome.com/docs/devtools/memory-problems.md.txt)
### 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](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt)
- [View and edit local storage](https://developer.chrome.com/docs/devtools/storage/localstorage.md.txt)
- [View, add, edit, and delete cookies](https://developer.chrome.com/docs/devtools/storage/cookies)
- [View origin trial information](https://developer.chrome.com/docs/web-platform/origin-trials.md.txt#devtools)
### Security panel
Debug mixed content issues, certificate problems, and more.
- [Understand security issues](https://developer.chrome.com/docs/devtools/security.md.txt)
## Community
File bug reports and feature requests in Crbug, which is the engineering team's bug tracker.
[Crbug](https://crbug.com/new)
If 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.
[Twitter](https://twitter.com/ChromeDevTools)
For help with using DevTools, Stack Overflow is the best channel.
[Stack Overflow](https://stackoverflow.com/questions/ask?tags=google-chrome-devtools)
To file bugs or feature requests on the DevTools docs, open a GitHub issue.
[Docs Issues](https://github.com/GoogleChrome/developer.chrome.com/issues/new/choose)
DevTools also has a Slack channel, but the team doesn't monitor it consistently.
[Slack](https://chromiumdev.slack.com/messages/devtools/)