20091211 google chrome_developer_tools
-
Upload
hunter-wu -
Category
Technology
-
view
428 -
download
1
Transcript of 20091211 google chrome_developer_tools
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