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.

Opening the Chrome DevTools

  • Select More Tools > Developer Tools from the Chrome Menu.
  • Right-click on a page element and select Inspect
  • Use the keyboard shortcuts Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac)

Discover the Panels

Device Mode

Device Mode Use the Device Mode to build fully responsive, mobile-first web experiences.

Elements

Elements Panel Use the Elements panel to iterate on the layout and design of your site by freely manipulating the DOM and CSS.

Console

Console Panel Use the Console to log diagnostic information during development or use it as a shell to interact with the JavaScript on the page.

Sources

Sources Panel Debug your JavaScript using breakpoints in the Sources Panel or connect your local files via Workspaces to use DevTools live editor.

Network

Network Panel Use the Network panel to get insights into requested and downloaded resources and optimize your page load performance.

Timeline

Timeline Panel Use the Timeline to improve the run time performance of your page by recording and exploring the various events that happen during the lifecycle of a site.

Profiles

Profiles Panel Use the Profiles panel if you need more information than the Timeline provide, for instance to track down memory leaks.

Application

Application Panel Use the Resources panel to inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.

Security

Security Panel Use the Security Panel to debug mixed content issues, problems with your certificate and more.

Get Involved

Twitter Stack Overflow Slack