Master of DevTools - Speaker Deck

Slide 1

Slide 1 text

Developer Tools

Slide 2

Slide 2 text

Topics DOM and Styles Editing Sources Debugging JavaScript Improving Network Performance Improving Performance Memory Profiling

Slide 3

Slide 3 text

Bad old times No debuggers Early debuggers Lazy alert()

Slide 4

Slide 4 text

Slide 5

Slide 5 text

CSS .sidebar-levels h3 a { transition: border-color 0.2s ease-in-out; border: 2px solid #bebebe; border-radius: 50%; color: #777777; display: block; margin-top: 7px; text-align: center; width: 30px; } @media screen and (min-width: 1060px) { .sidebar-levels h3 a { margin-right: 30px; } }

Slide 6

Slide 6 text

edit – save – test

Slide 7

Slide 7 text

Chrome Developer Tools

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Elements DOM and CSS Document Object Model and Styles

Slide 11

Slide 11 text

Let’s see in action (live examples here from screen)

Slide 12

Slide 12 text

Editing Sources Modify Sources Export Changes Track Versions

Slide 13

Slide 13 text

Console Log (Errors, Warnings, Info…) Command Line (Run JavaScript) etc.

Slide 14

Slide 14 text

Raw JavaScript Minified JavaScript function hello(name) { if (name.length > 16) { alert("No!"); } else { alert("Hi " + name + "!"); } } function hello(n){alert(n.length>16?"No!":"Hi “+n+"!")}