Google Chrome Developer Tools 呜龙 [email_address]
Chrome Developer Tools  VS  firebug <ul><li>向左 ? </li></ul><ul><li>向右 ? </li></ul>
Chrome Developer Tools  VS  firebug <ul><li>有一种痛苦 </li></ul><ul><li>叫 选择 ....... </li></ul>
Chrome Developer Tools  VS  firebug <ul><li>有一种速度 </li></ul><ul><li>叫  chrome....... </li></ul>
Chrome Developer Tools  VS  firebug <ul><li>u know,more than fast.... </li></ul>
Chrome Developer Tools: Overview
Elements <ul><li>DOM Elements Tree </li></ul><ul><li>Box Model </li></ul><ul><li>Properties </li></ul><ul><li>Event Listen...
Style panel  <ul><li>Computed Style Pane </li></ul><ul><li>Styles Pane </li></ul><ul><li>Viewing Styles </li></ul><ul><li>...
unit delta  <ul><li>0.1 unit: Alt-Up/Down (or plain Up/Down if the current value is in the range of [-1; 1]) </li></ul><ul...
Resource panel  <ul><li>Frame resources </li></ul><ul><li>easy to get a iframe </li></ul><ul><li>HTML5 Databases </li></ul...
Script panel  <ul><li>Breakpoints </li></ul><ul><li>Exceptions </li></ul>
exceptions <ul><li>Tracking exceptions </li></ul><ul><li>Viewing exception stack trace </li></ul><ul><li>Pause on exceptio...
Breakpoints <ul><li>Regular JavaScript Breakpoints </li></ul><ul><li>Breakpoints in Dynamic JavaScript </li></ul><ul><li>P...
Timeline <ul><li>For advanced timing and speed analysis </li></ul>
Profiles Panel <ul><li>For advanced timing and speed analysis </li></ul>
console  <ul><li>toggle the Console using the  Escape  key </li></ul><ul><li>console api </li></ul><ul><li>tricks </li></u...
console api <ul><li>clear() </li></ul><ul><li>log info warn error </li></ul><ul><li>assert debug </li></ul><ul><li>count <...
Remote Debugging <ul><li>chrome --remote-debugging-port=9222 </li></ul>
shortcut <ul><li>shortcut </li></ul><ul><li>esc :console toggole </li></ul><ul><li>jump to line:control+g </li></ul><ul><l...
settings
do more.... <ul><li>live auto save </li></ul><ul><li>http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/ </li></...
<ul><li>life is short ,you need chrome! </li></ul>
谢谢 观赏 WPS   Office Make Presentation much more fun @WPS 官方微博 @kingsoftwps
Upcoming SlideShare
Loading in …5
×

Google Chrome Developer Tools

1,713 views

Published on

Introduction to Google Chrome Developer Tools by Wu Long.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,713
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Google Chrome Developer Tools

  1. 1. Google Chrome Developer Tools 呜龙 [email_address]
  2. 2. Chrome Developer Tools VS firebug <ul><li>向左 ? </li></ul><ul><li>向右 ? </li></ul>
  3. 3. Chrome Developer Tools VS firebug <ul><li>有一种痛苦 </li></ul><ul><li>叫 选择 ....... </li></ul>
  4. 4. Chrome Developer Tools VS firebug <ul><li>有一种速度 </li></ul><ul><li>叫 chrome....... </li></ul>
  5. 5. Chrome Developer Tools VS firebug <ul><li>u know,more than fast.... </li></ul>
  6. 6. Chrome Developer Tools: Overview
  7. 7. Elements <ul><li>DOM Elements Tree </li></ul><ul><li>Box Model </li></ul><ul><li>Properties </li></ul><ul><li>Event Listeners </li></ul><ul><li>Search </li></ul><ul><li>The Elements panel supports XPath and CSS selectors as queries , in addition to plain text </li></ul><ul><li>#id .cls tag </li></ul>
  8. 8. Style panel <ul><li>Computed Style Pane </li></ul><ul><li>Styles Pane </li></ul><ul><li>Viewing Styles </li></ul><ul><li>Editing Styles </li></ul><ul><li>Adding New Rules and Properties </li></ul><ul><li>Metrics Pane </li></ul><ul><li>Pseudo element </li></ul><ul><li>Persisting Changes </li></ul>
  9. 9. unit delta <ul><li>0.1 unit: Alt-Up/Down (or plain Up/Down if the current value is in the range of [-1; 1]) </li></ul><ul><li>1 unit: Up/Down (for values greater than 1 or less than -1) </li></ul><ul><li>10 unit: Shift-Up/Down or PageUp/PageDown </li></ul><ul><li>100 unit: Shift-PageUp/PageDown </li></ul>style
  10. 10. Resource panel <ul><li>Frame resources </li></ul><ul><li>easy to get a iframe </li></ul><ul><li>HTML5 Databases </li></ul><ul><li>Cookies </li></ul>
  11. 11. Script panel <ul><li>Breakpoints </li></ul><ul><li>Exceptions </li></ul>
  12. 12. exceptions <ul><li>Tracking exceptions </li></ul><ul><li>Viewing exception stack trace </li></ul><ul><li>Pause on exceptions </li></ul><ul><li>Printing stack traces </li></ul><ul><li>Error.stack </li></ul><ul><li>console.trace() </li></ul><ul><li>console.assert() </li></ul><ul><li>Handling exceptions at runtime using window.onerror </li></ul><ul><li>exception </li></ul>
  13. 13. Breakpoints <ul><li>Regular JavaScript Breakpoints </li></ul><ul><li>Breakpoints in Dynamic JavaScript </li></ul><ul><li>Pause on Next JavaScript Statement </li></ul><ul><li>Pause on Exceptions </li></ul><ul><li>Pause on Uncaught Exceptions </li></ul><ul><li>Breakpoints on DOM Mutation Events </li></ul><ul><li>Breakpoints on XHR </li></ul><ul><li>Breakpoints on JavaScript Event Listeners </li></ul><ul><li>Breakpoints </li></ul>
  14. 14. Timeline <ul><li>For advanced timing and speed analysis </li></ul>
  15. 15. Profiles Panel <ul><li>For advanced timing and speed analysis </li></ul>
  16. 16. console <ul><li>toggle the Console using the Escape key </li></ul><ul><li>console api </li></ul><ul><li>tricks </li></ul><ul><li>ajax </li></ul><ul><li>append child nodes </li></ul><ul><li>up down arrow </li></ul><ul><li>tab suggetions </li></ul>
  17. 17. console api <ul><li>clear() </li></ul><ul><li>log info warn error </li></ul><ul><li>assert debug </li></ul><ul><li>count </li></ul><ul><li>time </li></ul><ul><li>others.... </li></ul>
  18. 18. Remote Debugging <ul><li>chrome --remote-debugging-port=9222 </li></ul>
  19. 19. shortcut <ul><li>shortcut </li></ul><ul><li>esc :console toggole </li></ul><ul><li>jump to line:control+g </li></ul><ul><li>clear:contronl+l </li></ul>
  20. 20. settings
  21. 21. do more.... <ul><li>live auto save </li></ul><ul><li>http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/ </li></ul><ul><li>https://github.com/NV/chrome-devtools-autosave </li></ul><ul><li>chage skin </li></ul><ul><li>http://darcyclarke.me/design/skin-your-chrome-inspector/ </li></ul><ul><li>reference </li></ul><ul><li>http://code.google.com/chrome/devtools/ </li></ul>
  22. 22. <ul><li>life is short ,you need chrome! </li></ul>
  23. 23. 谢谢 观赏 WPS Office Make Presentation much more fun @WPS 官方微博 @kingsoftwps

×