Google Chrome Developer Tools
-
Upload
tbmallf2e -
Category
Technology
-
view
1.374 -
download
6
description
Transcript of Google Chrome Developer Tools
![Page 2: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/2.jpg)
Chrome Developer Tools VS firebug
• 向左 ?• 向右 ?
![Page 3: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/3.jpg)
Chrome Developer Tools VS firebug
有一种痛苦叫 选择 .......
![Page 4: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/4.jpg)
Chrome Developer Tools VS firebug
有一种速度叫 chrome.......
![Page 5: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/5.jpg)
Chrome Developer Tools VS firebug
• u know,more than fast....
![Page 6: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/6.jpg)
Chrome Developer Tools: Overview
![Page 7: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/7.jpg)
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
![Page 8: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/8.jpg)
Style panel
• Computed Style Pane• Styles Pane• Viewing Styles• Editing Styles• Adding New Rules and Properties• Metrics Pane• Pseudo element• Persisting Changes
![Page 9: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/9.jpg)
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
![Page 10: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/10.jpg)
Resource panel
• Frame resources
• easy to get a iframe
• HTML5 Databases
• Cookies
![Page 11: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/11.jpg)
Script panel
• Breakpoints• Exceptions
![Page 12: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/12.jpg)
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
![Page 13: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/13.jpg)
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
![Page 14: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/14.jpg)
Timeline
• For advanced timing and speed analysis
![Page 15: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/15.jpg)
Profiles Panel
• For advanced timing and speed analysis
![Page 16: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/16.jpg)
console
• toggle the Console using the Escape key
• console api
• tricks
• ajax
• append child nodes
• up down arrow
• tab suggetions
![Page 17: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/17.jpg)
console api
• clear()
• log info warn error
• assert debug
• count
• time
• others....
![Page 18: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/18.jpg)
Remote Debugging
chrome --remote-debugging-port=9222
![Page 19: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/19.jpg)
shortcut
shortcut
esc :console toggole
jump to line:control+g
clear:contronl+l
![Page 20: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/20.jpg)
settings
![Page 21: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/21.jpg)
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/
![Page 22: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/22.jpg)
• life is short ,you need chrome!
![Page 23: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022081414/54bd8a754a7959ca5a8b4586/html5/thumbnails/23.jpg)
谢谢观赏
WPS OfficeMake Presentation much more fun
@WPS官方微博
@kingsoftwps