The Chromium Projects

 
Search this site

Except as otherwise noted, the content of this page is licensed under a Creative Commons Attribution 2.5 license, and examples are licensed under the BSD License.

The Chromium OS designs and code are preliminary. Expect them to evolve.

Google Chrome Developer Tools

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-I keys. Control-Shift-J opens Developer Tools and brings focus to the Console.
  • On Mac, select the Command-Option-I, ⌥⌘I, keys. Command-Option-J opens Developer Tools and brings focus to the Console.

Tutorials

For a brief tutorial, see the Chrome Developer Tools Tutorial.

To read about what's new on the Google Chrome Developer Tools, see our blog posts:

To read about what's new in Web Inspector in general, see our posts at WebKit.org:
    More Web Inspector Updates (Apr 2010)
    Web Inspector Updates (Nov 2009)
    Web Inspector Redesign (Sep 2008)

Watch our videos:


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.


  • The following Timeline Panel video describes how to use the timeline panel to get information on where time is spent when loading your web app or page.



More Information

For more information, follow the links below:
Subpages (1): Google Chrome Developer Tools Tutorial

  Sign in   Recent Site Activity   Terms   Report Abuse   Print page  |  Powered by Google Sites