Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google Chrome developer tools

1,762 views

Published on

Presentation for TUGNR (TYPO3 Usergroup Niederrhein | Euregio). Little Overview/Introduction to the Google Chrome developer tools.

One more Resource: http://jtaby.com/2012/04/23/modern-web-development-part-1.html

Published in: Technology, Spiritual
  • Be the first to comment

  • Be the first to like this

Google Chrome developer tools

  1. 1. G o o g l e C h ro m e D e v e l o p e r To o l s Short Overview Daniel Siepmann 1Tuesday, March 27, 12 1
  2. 2. TOC 1. Introduction 2. Excess Tools 3. Panels 4. Summary Daniel Siepmann 2Tuesday, March 27, 12 2
  3. 3. I n t ro d u c t i o n Daniel Siepmann 3Tuesday, March 27, 12 3
  4. 4. I n t ro d u c t i o n ‣ http://code.google.com/chrome/devtools/ ‣ http://www.chromium.org/devtools ‣ http://paulirish.com/2011/a-re- introduction-to-the-chrome-developer- tools/ ‣ Youtube: google chrome developer tools Daniel Siepmann 4Tuesday, March 27, 12 4
  5. 5. TOC 1. Introduction ‣ Excess Tools 2. Panels 3. Summary Daniel Siepmann 5Tuesday, March 27, 12 5
  6. 6. E x c e s s To o l s ‣ Right-click on any page element and select Inspect element ‣ On Windows and Linux, press CTRG + ⇧ + Character ‣ On Mac, press ⌥+ ⌘ + Character ‣ I keys to open Developer Tools ‣ J to open Developer Tools and bring focus to the Console ‣ C to toggle Inspect Element mode Daniel Siepmann 6Tuesday, March 27, 12 6
  7. 7. TOC 1. Introduction 2. Excess Tools ‣ Panels 3. Summary Daniel Siepmann 7Tuesday, March 27, 12 7
  8. 8. Panels I. Elements II. Resources III. Network IV.Scripts V. Console Daniel Siepmann 8Tuesday, March 27, 12 8
  9. 9. Elements ‣ Show current DOM ‣ Manipulate DOM ‣ Set Breakpoints ‣ Manipulate CSS Daniel Siepmann 9Tuesday, March 27, 12 9
  10. 10. Panels I. Elements ‣ Resources III. Network IV.Scripts V. Console Daniel Siepmann 10Tuesday, March 27, 12 10
  11. 11. Resources ‣ Edit / Save CSS / JS ‣ Versioning of CSS / JS while editing Daniel Siepmann 11Tuesday, March 27, 12 11
  12. 12. Panels I. Elements II. Resources ‣ Network IV.Scripts V. Console Daniel Siepmann 12Tuesday, March 27, 12 12
  13. 13. Network ‣ Header ‣ Overview ‣ Timeline Daniel Siepmann 13Tuesday, March 27, 12 13
  14. 14. Panels I. Elements II. Resources III. Network ‣ Scripts V. Console Daniel Siepmann 14Tuesday, March 27, 12 14
  15. 15. S cr i pt s ‣ Edit ‣ Breakpoints ‣ Pretty Print Daniel Siepmann 15Tuesday, March 27, 12 15
  16. 16. Panels I. Elements II. Resources III. Network IV.Scripts ‣ Console Daniel Siepmann 16Tuesday, March 27, 12 16
  17. 17. Co n sol e ‣ Code completion ‣ Little gimmicks ‣ $0 -> selected node in Elements-Panel ‣ $1, $2, ... -> History of selected nodes. ‣ inspect(), dir() Daniel Siepmann 17Tuesday, March 27, 12 17
  18. 18. TOC 1. Introduction 2. Excess Tools 3. Panels ‣ Summary Daniel Siepmann 18Tuesday, March 27, 12 18
  19. 19. S um m ary ‣ Fucking awesome ‣ Versioning ‣ Debugging ‣ Pretty print Daniel Siepmann 19Tuesday, March 27, 12 19
  20. 20. Questions Daniel Siepmann 20Tuesday, March 27, 12 20
  21. 21. Author Daniel Siepmann Employed at wfp:2 TYPO3, PHP, JavaScript @layneobserdia www.layne-obserdia.de Daniel Siepmann 21Tuesday, March 27, 12 21

×