Google Chrome developer tools

1,252 views
1,171 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,252
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×