Skip to main content
Kinetic Community

Chrome Developer Tools

Chrome Developer Tools are included in the Chrome web browser. Similar to Firebug, Chrome allows web developers and programmers deep access into the internals of the browser and their web application.

How to get It

Chrome is available for download at http://www.google.com/chrome

How to use it

Never used Chrome before?  Getting the console open is simple.  On the page you want to work with in Chrome, right click somewhere on the page.  You will see an item at the bottom of this menu: Inspect Element.  This will open the Developer Console at the bottom of your screen. 

Chrome1.png

For details and tutorials, the Chrome Developers site is a great resource. On the developers site, there is a linkon the left for Documentation. Within this documentation there are details on each panel available. Also, they have links to resources including videos and a forum.  There is a getting started video in this resources section.

HTML/CSS Debugging

Once you've chosen to inspect an element, the Elements tab of the console will open with the chosen element hightlighted.  You will notice that if you mouse over other elements, they will be highlighted in the screen above and you can switch which element is highlighted in the console by clicking on it.

ChromeConsole.png

The Chrome Developer site documentation for the Elements section and the Styles include wonderful descriptions and walk throughs. There is also a video for Element/Style editing.

Script Debugging

The Script tab of the console can be used to work with the javascript on a page. The name of the script file loaded is a drop down list for all of the scripts loaded for that page.

ChromeConsole3.png

A good, complete explanation on how to use these tools for script debugging is in the documentation for the Scripts panel.  Note the Breakpoints and Exceptions subsections of this documentation. There is also video for debugging javascript.

Timing/Performance

Chrome has a Network panel that is pretty much equivalent to Firebug's Net tab, but Chrome also has more advanced Timeline and Profiles tools.  Below are descriptions of these panels and links to Chrome's detailed information.

Network

Use the Network panel to learn what components your web page or application is requesting from web servers, how long these requests take, and how much bandwidth is required. You can also view the HTTP request and response headers for each of your resources. The Network panel is perfect for helping you speed up page load times. [more]

Timeline

For advanced timing and speed analysis, the Timeline panel offers in-depth visibility into the various Chrome behind-the-scenes activities. You can learn how long the browser takes to handle DOM events, rendering page layouts, and paint the window. [more]

Profiles

The Profiles tool helps you capture and analyze the performance of JavaScript scripts. For example, you can learn which functions take the most time to execute and zoom in on exactly where to optimize. [more]