Master of DevTools

My first talk at hack@CST hackathon about Chrome Developer Tools and web optimization

Transcript

1. Developer Tools
2. Topics DOM and Styles Editing Sources Debugging JavaScript Improving Network Performance Improving Performance Memory Profiling
3. Bad old times No debuggers Early debuggers Lazy alert()
4. JS
5. 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; } }
6. edit – save – test
7. Chrome Developer Tools
10. Elements DOM and CSS Document Object Model and Styles
11. Let’s see in action (live examples here from screen)
12. Editing Sources Modify Sources Export Changes Track Versions
13. Console Log (Errors, Warnings, Info…) Command Line (Run JavaScript) etc.
14. 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+"!")}
15. Raw JavaScript: Min Version: 226 KB !!! 89 KB 226 / 89 ≈ 2.5
16. Levan Velijanashvili me@stichoza.com twitter.com/Stichoza github.com/Stichoza