Start with this overview of the DevTools to discover the most popular and useful features.
Note: If you want to use the latest version of DevTools, you should get Google Chrome Canary.
How to access the DevTools
To access the DevTools, open a web page or web app in Google Chrome. Either:
- Select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools, or
- Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.
There are several useful shortcuts for opening the DevTools:
- Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools.
- Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to open the DevTools and bring focus to the Console.
- Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode, or toggle Inspect Element mode if the DevTools are already open.
For your day-to-day workflow, learning the shortcuts will save you time.
The DevTools window
The DevTools are organised into task-oriented groups in the toolbar at the top of the window. Each toolbar item and corresponding panel let you work with a specific type of page or app information, including DOM elements, resources, and sources.
Overall, there are eight main groups of tools available view Developer Tools: Elements, Resources, Network, Sources, Timeline, Profiles, Storage, Audits, and Console. You can use the Ctrl+[ and Ctrl+] shortcuts to move between panels.
The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page. For example, you may be curious if an image has an HTML id attribute, and what that attribute's value is.
- A place to log diagnostic information using methods provided by the Console API, such as console.log(), or console.profile().
- A shell prompt where you can enter commands and interact with the document and the Chrome DevTools. You can evaluate expressions directly in the Console, and can also use the methods provided by the Command Line API, such as $() command for selecting elements, or profile() to start the CPU profiler.
The Network panel provides insights into resources that are requested and downloaded over the network in real time. Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.
The Audit panel can analyze a page as it loads and provide suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness. For further insight, we recommend also installing the PageSpeed extension.
The Resources panel lets you inspect resources that are loaded in the inspected page. It lets you interact with HTML 5 Database, Local Storage, Cookies, AppCache, etc.
There are several other areas of the DevTools documentation that you might find of benefit to review. These include:
Want more tips on DevTools? Watch our regular show The Breakpoint on YouTube.
or checkout the Google Chrome Developers page on Google+.
Take the course
Explore and master the DevTools with our free "Discover DevTools" course on Code School.
To submit a bug or a feature request on DevTools, please use issue tracker at http://crbug.com. Please also mention "DevTools" in the bug summary.
Anyone can also help make the DevTools better be directly contributing back to the source.