The Google Chrome Developer Tools provide an integrated environment for debugging, optimizing, and understanding a web application, or website, running in Google Chrome. The developer tools are developed partly through the open source project, WebKit, where the tools are called Web Inspector.
This document provides an introduction to the developer tools, and links to other resources that provide more in-depth information.
Getting Started with Developer Tools
To get started with the developer tools, open a web page, or web app, in Google Chrome then take one of the following actions:
- Select the Page menu
at the top-right of your browser window, then select Developer -> Developer Tools. - Right-click on any page element and select Inspect element.
- On Windows and Linux, select the Control-Shift-J keys.
- On Mac, select the Command-Option-J, ⌥⌘J, keys.
Tutorials
For a full tutorial, see the Chrome Developer Tools Tutorial.
The following videos will help you to start learning about the Google Chrome Developer Tools:
- The following Getting Started video describes how to start to interact with the developer tools, the panels within the developer tools window, and the interactive console.
- The following Inspecting Elements and Resources video describes how to:
- inspect elements
- change style properties
- edit DOM attributes
- view and edit position metrics
- view a timeline for network activities
- view XHR information.
- The following Debugging JavaScript video describes the graphical interface to the V8 debugger and how to:
- set a break point
- pause
- zoom through code
- step through code
- view the current call stack and in scope variables
- The following Profiling and Optimizing video describes how to use the built in CPU, and heap profilers to understand where resources are being spent and so helps you to optimize your code.
