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

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 1
Tuesday, March 27, 12 1

2. TOC
1. Introduction
2. Excess Tools
3. Panels
4. Summary
Daniel Siepmann 2
Tuesday, March 27, 12 2

3. I n t ro d u c t i o n
Daniel Siepmann 3
Tuesday, March 27, 12 3

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 4
Tuesday, March 27, 12 4

5. TOC
1. Introduction
‣ Excess Tools
2. Panels
3. Summary
Daniel Siepmann 5
Tuesday, March 27, 12 5

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 6
Tuesday, March 27, 12 6

7. TOC
1. Introduction
2. Excess Tools
‣ Panels
3. Summary
Daniel Siepmann 7
Tuesday, March 27, 12 7

8. Panels
I. Elements
II. Resources
III. Network
IV.Scripts
V. Console
Daniel Siepmann 8
Tuesday, March 27, 12 8

9. Elements
‣ Show current DOM
‣ Manipulate DOM
‣ Set Breakpoints
‣ Manipulate CSS
Daniel Siepmann 9
Tuesday, March 27, 12 9

10. Panels
I. Elements
‣ Resources
III. Network
IV.Scripts
V. Console
Daniel Siepmann 10
Tuesday, March 27, 12 10

11. Resources
‣ Edit / Save CSS / JS
‣ Versioning of CSS / JS while editing
Daniel Siepmann 11
Tuesday, March 27, 12 11

12. Panels
I. Elements
II. Resources
‣ Network
IV.Scripts
V. Console
Daniel Siepmann 12
Tuesday, March 27, 12 12

13. Network
‣ Header
‣ Overview
‣ Timeline
Daniel Siepmann 13
Tuesday, March 27, 12 13

14. Panels
I. Elements
II. Resources
III. Network
‣ Scripts
V. Console
Daniel Siepmann 14
Tuesday, March 27, 12 14

15. S cr i pt s
‣ Edit
‣ Breakpoints
‣ Pretty Print
Daniel Siepmann 15
Tuesday, March 27, 12 15

16. Panels
I. Elements
II. Resources
III. Network
IV.Scripts
‣ Console
Daniel Siepmann 16
Tuesday, March 27, 12 16

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 17
Tuesday, March 27, 12 17

18. TOC
1. Introduction
2. Excess Tools
3. Panels
‣ Summary
Daniel Siepmann 18
Tuesday, March 27, 12 18

19. S um m ary
‣ Fucking awesome
‣ Versioning
‣ Debugging
‣ Pretty print
Daniel Siepmann 19
Tuesday, March 27, 12 19

20. Questions
Daniel Siepmann 20
Tuesday, March 27, 12 20

21. Author
Daniel Siepmann
Employed at wfp:2
TYPO3, PHP, JavaScript
@layneobserdia
www.layne-obserdia.de
Daniel Siepmann 21
Tuesday, March 27, 12 21