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