The following videos will help you to start learning about the Google Chrome Developer Tools:
- Getting Started
- Inspecting Elements and Resources
- Profiling and Optimizing
- Timeline Panel
- Google IO 2010 session
- Google IO 2011 session
- Google IO 2012 session NEW!
The following video describes how to start to interact with the developer tools, the panels within the developer tools window, and the interactive console.
Inspecting Elements and Resources
The following 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 video describes the graphical interface to the V8 debugger and how to:
- set a break point
- zoom through code
- step through code
- view the current call stack and in scope variables
Profiling and Optimizing
The following 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.
The following video describes how to use the timeline panel to get information on where time is spent when loading your web app or page.
Google IO 2011 session
The following video was recorded during the Chrome Developer Tools session at Google IO 2011.
Google IO 2010 session
The following video was recorded during the Chrome Developer Tools session at Google IO 2010.
Google IO 2012: Chrome Developer Tools Evolution
Follow Pavel Feldman and Sam Dutton in a review of the newest Developer Tools features: mobile debugging, editing, new Timeline "Frame Mode" and much more.