googlechromedevelopertools-120424180007-phpapp01.pdf
- 1. Daniel Siepmann Google Chrome Developer Tools Short Overview 1 1 Tuesday, March 27, 12
- 2. Daniel Siepmann TOC 1. Introduction 2. Excess Tools 3. Panels 4. Summary 2 2 Tuesday, March 27, 12
- 4. Daniel Siepmann Introduction 4 โฃ 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 4 Tuesday, March 27, 12
- 5. Daniel Siepmann TOC 1. Introduction โฃ Excess Tools 2. Panels 3. Summary 5 5 Tuesday, March 27, 12
- 6. Daniel Siepmann Excess Tools โฃ 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 6 6 Tuesday, March 27, 12
- 7. Daniel Siepmann TOC 1. Introduction 2. Excess Tools โฃ Panels 3. Summary 7 7 Tuesday, March 27, 12
- 8. Daniel Siepmann Panels I. Elements II. Resources III.Network IV.Scripts V. Console 8 8 Tuesday, March 27, 12
- 9. Daniel Siepmann Elements โฃ Show current DOM โฃ Manipulate DOM โฃ Set Breakpoints โฃ Manipulate CSS 9 9 Tuesday, March 27, 12
- 10. Daniel Siepmann Panels I. Elements โฃ Resources III.Network IV.Scripts V. Console 10 10 Tuesday, March 27, 12
- 11. Daniel Siepmann Resources โฃ Edit / Save CSS / JS โฃ Versioning of CSS / JS while editing 11 11 Tuesday, March 27, 12
- 12. Daniel Siepmann Panels I. Elements II. Resources โฃ Network IV.Scripts V. Console 12 12 Tuesday, March 27, 12
- 13. Daniel Siepmann Network โฃ Header โฃ Overview โฃ Timeline 13 13 Tuesday, March 27, 12
- 14. Daniel Siepmann Panels I. Elements II. Resources III.Network โฃ Scripts V. Console 14 14 Tuesday, March 27, 12
- 15. Daniel Siepmann Scripts โฃ Edit โฃ Breakpoints โฃ Pretty Print 15 15 Tuesday, March 27, 12
- 16. Daniel Siepmann Panels I. Elements II. Resources III.Network IV.Scripts โฃ Console 16 16 Tuesday, March 27, 12
- 17. Daniel Siepmann Console โฃ Code completion โฃ Little gimmicks โฃ $0 -> selected node in Elements-Panel โฃ $1, $2, ... -> History of selected nodes. โฃ inspect(), dir() 17 17 Tuesday, March 27, 12
- 18. Daniel Siepmann TOC 1. Introduction 2. Excess Tools 3. Panels โฃ Summary 18 18 Tuesday, March 27, 12
- 19. Daniel Siepmann Summary โฃ Fucking awesome โฃ Versioning โฃ Debugging โฃ Pretty print 19 19 Tuesday, March 27, 12
- 21. Daniel Siepmann Author Daniel Siepmann Employed at wfp:2 TYPO3, PHP, JavaScript @layneobserdia www.layne-obserdia.de 21 21 Tuesday, March 27, 12