Google Chrome Developer ToolsHunter@20091211
First of Allchrome dev上網搜尋
Google Chrome releases● Stable channel● Beta channel– latest features– more stable than Dev● Dev channel– where ideas get ...
Getting StartCtrl Shift J
The Developer Tools WindowCtrl - [ : iterate backwardCtrl - ] : iterate forwardEsc : toggle console
The Elements PanelInspect 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 tothe console.● console.warn(object[, object, ...]) - W...
Console API● $("id") - dumps node with id equal to "id" into the Console.● $$("selector") - dumps nodes equal to the CSS s...
The Scripts Panel
Set breakpoints
Pause here!F8 : continueF10 : step overF11 : step intoShift - F11 : step outCtrl - . : Next call frameCtrl - , : Previous ...
References● Early Access Release Channels– http://www.chromium.org/getting-involved/dev-channel● Google Chrome Developer T...
chrome dev上網搜尋
Upcoming SlideShare
Loading in...5
×

20091211 google chrome_developer_tools

230

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
230
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20091211 google chrome_developer_tools

  1. 1. Google Chrome Developer ToolsHunter@20091211
  2. 2. First of Allchrome dev上網搜尋
  3. 3. Google Chrome releases● Stable channel● Beta channel– latest features– more stable than Dev● Dev channel– where ideas get tested (and sometimesfail)– usually require some manualconfiguration
  4. 4. Getting StartCtrl Shift J
  5. 5. The Developer Tools WindowCtrl - [ : iterate backwardCtrl - ] : iterate forwardEsc : toggle console
  6. 6. The Elements PanelInspect elementToggle consoleDock/Undock
  7. 7. syntax highlighted
  8. 8. finding textsCSS selectorsXPath
  9. 9. stylestoggle style
  10. 10. Edit a number property:Up/Down+ Alt : steps by 0.1+ Shift : steps by 10Add new style selectors
  11. 11. add new attributesMetrics
  12. 12. Event listeners viewer
  13. 13. Console API● console.log(object[, object, ...]) - Writes a message tothe console.● console.warn(object[, object, ...]) - Writes a message tothe console with the visual "warning" icon.● console.error(object[, object, ...]) - Writes a message tothe console with the visual "error" icon.● console.assert(expression[, object, ...]) - Tests that anexpression is true. If not, it will write a message to theconsole and throw an exception.
  14. 14. Console API● $("id") - dumps node with id equal to "id" into the Console.● $$("selector") - dumps nodes equal to the CSS selectorinto the Console.● $0 - contains most recently selected node. You can use itto dump it into the console or in other consoleexpressions.● $1 .. $5 - contain previously selected nodes.● inspect(node) - selects given node in the Elements Panel.● dir(node) - dumps node as a JavaScript object with itsproperties into the Console.● dirxml(node) - dumps node as an HTML subtree into theConsole.
  15. 15. The Scripts Panel
  16. 16. Set breakpoints
  17. 17. Pause here!F8 : continueF10 : step overF11 : step intoShift - F11 : step outCtrl - . : Next call frameCtrl - , : Previous call frameShift – Ctrl - E : Evaluate selection
  18. 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. 19. chrome dev上網搜尋
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×