20091211 google chrome_developer_tools
?Download as ODP, PDF?
0 likes?529 views
This document provides an overview of Google Chrome Developer Tools. It discusses the different release channels for Chrome, including Stable, Beta, and Dev. It describes how to open the Developer Tools and an overview of the key panels like Elements, Console, and Scripts. It also provides examples of commands and APIs available in the Console.
![The Developer Tools Window
Ctrl - [ : iterate backward
Ctrl - ] : iterate forward
Esc : toggle console](https://image.slidesharecdn.com/20091211googlechromedevelopertools-130508104851-phpapp01/85/20091211-google-chrome_developer_tools-5-320.jpg)
![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.](https://image.slidesharecdn.com/20091211googlechromedevelopertools-130508104851-phpapp01/85/20091211-google-chrome_developer_tools-13-320.jpg)
20091211 google chrome_developer_tools
- 1. Google Chrome Developer Tools Hunter@20091211
- 2. First of All chrome »å±ð±¹ÉÏÍøËÑÑ°
- 3. Google Chrome releases ¡ñ Stable channel ¡ñ Beta channel ¨C latest features ¨C more stable than Dev ¡ñ Dev channel ¨C where ideas get tested (and sometimes fail) ¨C usually require some manual configuration
- 5. The Developer Tools Window Ctrl - [ : iterate backward Ctrl - ] : iterate forward Esc : toggle console
- 6. The Elements Panel Inspect elementToggle consoleDock/Undock
- 10. Edit a number property: Up/Down + Alt : steps by 0.1 + Shift : steps by 10 Add new style selectors
- 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.
- 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 ¨C Ctrl - E : Evaluate selection
- 18. References ¡ñ Early Access Release Channels ¨C http://www.chromium.org/getting-involved/dev-channel ¡ñ Google Chrome Developer Tools Tutorial ¨C http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial ¡ñ Firebug Console API ¨C http://getfirebug.com/wiki/index.php/Console_API ¡ñ Firebug Command Line API ¨C http://getfirebug.com/commandline.html ¡ñ