Google Chrome Developer Tools

Hunter@20091211

First of All

chrome dev

Google Chrome releases

Stable channel

Beta channel

latest features

more stable than Dev

Dev channel

where ideas get tested (and sometimes fail)

usually require some manual configuration

Getting Start

Ctrl Shift J

The Developer Tools Window

Ctrl - [ : iterate backwardCtrl - ] : iterate forward

Esc : toggle console

The Elements Panel

Inspect elementToggle consoleDock/Undock

syntax highlighted

finding textsCSS selectorsXPath

stylestoggle style

Edit a number property:Up/Down+ Alt : steps by 0.1+ Shift : steps by 10Add new style selectors

add new attributesMetrics

Event listeners viewer

Console API

console.log(object[, object, ...]) - Writes a message to the console.

console.warn(object[, object, ...]) - Writes a message to the console with the visual "warning" icon.

console.error(object[, object, ...]) - Writes a message to the console with the visual "error" icon.

console.assert(expression[, object, ...]) - Tests that an expression is true. If not, it will write a message to the console and throw an exception.

Console API

$("id") - dumps node with id equal to "id" into the Console.

$$("selector") - dumps nodes equal to the CSS selector into the Console.

$0 - contains most recently selected node. You can use it to dump it into the console or in other console expressions.

$1 .. $5 - contain previously selected nodes.

inspect(node) - selects given node in the Elements Panel.

dir(node) - dumps node as a JavaScript object with its properties into the Console.

dirxml(node) - dumps node as an HTML subtree into the Console.

The Scripts Panel

Set breakpoints

Pause here!F8 : continueF10 : step overF11 : step intoShift - F11 : step outCtrl - . : Next call frameCtrl - , : Previous call frameShift Ctrl - E : Evaluate selection

References

Early Access Release Channels

http://www.chromium.org/getting-involved/dev-channel

Google Chrome Developer Tools Tutorial

http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial

Firebug Console API

http://getfirebug.com/wiki/index.php/Console_API

Firebug Command Line API

http://getfirebug.com/commandline.html

chrome dev

Click to edit the title text format

Click to edit the title text format

Click to edit the outline text format

Second Outline Level

Third Outline Level

Fourth Outline Level

Fifth Outline Level

Sixth Outline Level

Seventh Outline Level

Eighth Outline Level

Ninth Outline Level