google chrome developer tools
DESCRIPTION
Introduction to Google Chrome Developer Tools by Wu Long.TRANSCRIPT
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