Chrome DevTools

The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. Use the DevTools to iterate, debug, and profile your site.

Open DevTools

• Select More Tools > Developer Tools from Chrome's Main Menu.
• Right-click a page element and select Inspect.
• Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

Discover DevTools

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.

• 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.

• Using the Console
• Interact from Command Line

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.

• Get Started
• Network Issues Guide
• Network Panel Reference

Performance panel (previously Timeline 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
• How to look at performance
• Analyze runtime performance
• Diagnose Forced Synchronous Layouts

Memory panel (previously Profiles panel)

Profile memory usage and track down leaks.

• Fix Memory Problems
• JavaScript CPU Profiler

Application panel (previously Resources 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.

• Understand Security Issues

Get Involved

The best place to file bug reports and feature requests for Chrome DevTools is Crbug, which is the master tracker for the DevTools engineering team.

Crbug

For quick bug reports or feature requests, send a tweet to @ChromeDevTools. Ultimately, somebody converts your tweet to an issue on Crbug, so you can file the Crbug issue yourself if you want to ensure that it gets addressed by the DevTools engineering team.

Twitter

For help with using DevTools, Stack Overflow or the mailing list are the best channels.

To file bugs or feature requests on the DevTools docs, open a GitHub issue on the Web Fundamentals repository.

Docs Issues

DevTools also has a Slack channel, but it doesn't get much activity.

Slack