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.
- Select More Tools > Developer Tools from the Chrome Menu.
- Right-click on a page element and select Inspect
- Use shortcuts Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac)
Discover the Panels
Remote Debugging allows you to remotely debug and screencast any device running Chrome on your Desktop.
Use the Device Mode to build fully responsive, mobile-first web experiences.
Use the Elements panel to iterate on the layout and design of your site by freely manipulating the DOM and CSS.
Use the Network panel to get insights into requested and downloaded resources and optimize your page load performance.
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.
Use the Profiles panel if you need more information than the Timeline provide, for instance to track down memory leaks.
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.
Use the Security Panel to debug mixed content issues, problems with your certificate and more.
Except 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 Terms of Service.