1. Google Chrome Developer Tools
Hunter@20091211

2. First of All
chrome dev上網搜尋

3. 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

4. Getting Start
Ctrl Shift J

5. The Developer Tools Window
Ctrl - [ : iterate backward
Ctrl - ] : iterate forward
Esc : toggle console

6. The Elements Panel
Inspect elementToggle consoleDock/Undock

7. syntax highlighted

8. finding texts
CSS selectors
XPath

9. styles
toggle style

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

11. add new attributes
Metrics

12. Event listeners viewer

13. 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.

14. 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.

15. The Scripts Panel

16. Set breakpoints

17. Pause here!
F8 : continue
F10 : step over
F11 : step into
Shift - F11 : step out
Ctrl - . : Next call frame
Ctrl - , : Previous call frame
Shift – Ctrl - E : Evaluate selection

18. 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
●

19. chrome dev上網搜尋