Google Chrome Developer Tools

呜龙wulong.lcx@taobao.com

Chrome Developer Tools VS firebug

• 向左 ?• 向右 ?

Chrome Developer Tools VS firebug

有一种痛苦叫 选择 .......

Chrome Developer Tools VS firebug

有一种速度叫 chrome.......

Chrome Developer Tools VS firebug

• u know,more than fast....

Chrome Developer Tools: Overview

Elements

• DOM Elements Tree

• Box Model

• Properties

• Event Listeners

• SearchThe Elements panel supports XPath and CSS selectors as queries, in addition to plain text

#id .cls tag

Style panel

• Computed Style Pane• Styles Pane• Viewing Styles• Editing Styles• Adding New Rules and Properties• Metrics Pane• Pseudo element• Persisting Changes

unit delta

• 0.1 unit: Alt-Up/Down (or plain Up/Down if the current value is in the range of [-1; 1])

• 1 unit: Up/Down (for values greater than 1 or less than -1)

• 10 unit: Shift-Up/Down or PageUp/PageDown• 100 unit: Shift-PageUp/PageDown

style

Resource panel

• Frame resources

• easy to get a iframe

• HTML5 Databases

• Cookies

Script panel

• Breakpoints• Exceptions

exceptions

• Tracking exceptions• Viewing exception stack trace• Pause on exceptions• Printing stack traces• Error.stack• console.trace()• console.assert()• Handling exceptions at runtime using window.on

error• exception

Breakpoints

• Regular JavaScript Breakpoints• Breakpoints in Dynamic JavaScript• Pause on Next JavaScript Statement• Pause on Exceptions• Pause on Uncaught Exceptions• Breakpoints on DOM Mutation Events• Breakpoints on XHR• Breakpoints on JavaScript Event Listeners• Breakpoints

Timeline

• For advanced timing and speed analysis

Profiles Panel

• For advanced timing and speed analysis

console

• toggle the Console using the Escape key

• console api

• tricks

• ajax

• append child nodes

• up down arrow

• tab suggetions

console api

• clear()

• log info warn error

• assert debug

• count

• time

• others....

Remote Debugging

chrome --remote-debugging-port=9222

shortcut

shortcut

esc :console toggole

jump to line:control+g

clear:contronl+l

settings

do more....• live auto save• http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/• https://github.com/NV/chrome-devtools-autosave• chage skin• http://darcyclarke.me/design/skin-your-chrome-inspector/• reference• http://code.google.com/chrome/devtools/

• life is short ,you need chrome!

谢谢观赏

WPS OfficeMake Presentation much more fun

@WPS官方微博

@kingsoftwps