Chrome DevTools

Videos

The following videos will help you to start learning about the Google Chrome Developer Tools:

  1. Getting Started
  2. Inspecting Elements and Resources
  3. Debugging JavaScript
  4. Profiling and Optimizing
  5. Timeline Panel
  6. Become a Javascript Console Power-User
  7. Google IO 2010 session
  8. Google IO 2011 session
  9. Google IO 2012 session NEW!

Getting Started

The following video describes how to start to interact with the developer tools, the panels within the developer tools window, and the interactive console.

Back to top

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.

Back to top

Debugging JavaScript

The following 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

Back to top

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.

Back to top

Timeline Panel

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.

Back to top

Become a Javascript Console Power-User

Level up on the Javascript console in the Chrome DevTools. Look at XHR requests, learn console helper functions to monitor events or explore objects better. Paul Irish from the Chrome team gives you a rundown.

Back to top

Google IO 2011 session

The following video was recorded during the Chrome Developer Tools session at Google IO 2011.

Back to top

Google IO 2010 session

The following video was recorded during the Chrome Developer Tools session at Google IO 2010.

Back to top

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.

Back to top

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.