20091211 google chrome_developer_tools
Upcoming SlideShare
Loading in...5
×
 

20091211 google chrome_developer_tools

on

  • 190 views

 

Statistics

Views

Total Views
190
Slideshare-icon Views on SlideShare
190
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    20091211 google chrome_developer_tools 20091211 google chrome_developer_tools Presentation Transcript

    • 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 tested (and sometimesfail)– usually require some manualconfiguration
    • 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, ...]) - 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.
    • 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.
    • 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上網搜尋