Master the Chrome DevTools

Chrome DevTools constantly evolves. New handy features are added but developers are often unaware of them. I noticed that since I started working as a developer and tend to use only a handful of the features of the dev tools. Recently, I realized that there are so many new features that I did not even know of. Speaking with many other developers it turned out that they had no idea of these features as well. Since then I started following what is coming in DevTools. This has immensely increased my developer productivity. I would love to share all these tips and tricks so that I can help other developers to improve their productivity as well.

Presented at ScotlandJS.

Transcript

1. MASTER THE MASTER THE CHROME DEVTOOLS CHROME DEVTOOLS
2. I AM LORA I AM LORA
3. TWITTER TWITTER @LoraVardarova
4. SOFTWARE ENGINEER SOFTWARE ENGINEER
5. MISC MISC Awesome Agile So ware Development: Open Salaries: bit.ly/awesome-agile bit.ly/open-developer-salaries
6. CONTENT WARNING CONTENT WARNING cw: Live Demo
7. CHROME DEVTOOLS CHROME DEVTOOLS
8. COMMAND + SHIFT + P (MAC) COMMAND + SHIFT + P (MAC) Control + Shi + P (Windows)
9. SCREENSHOTS SCREENSHOTS cw: Live Demo
10. SCREENSHOTS SCREENSHOTS Node Viewport Full size Capture Screenshots (in Network panel)
11. HTML & CSS HTML & CSS cw: Live Demo
12. HTML HTML Drag & drop
13. CSS CSS Computed styles Colour picker Format Coverage (unused CSS)
14. AUDITS AUDITS cw: Live Demo
15. AUDITS AUDITS Performance Pregressive Web App Best Practices Accessibility SEO
16. LOCAL OVERRIDES LOCAL OVERRIDES cw: Live Demo
17. LOCAL OVERRIDES LOCAL OVERRIDES HTML CSS JS Images
18. RESOURCES RESOURCES
19. RESOURCES RESOURCES Documentation: Twitter: Awesome Chrome DevTools: bit.ly/devtools-documentation @ChromeDevTools bit.ly/awesome-chrome-devtools
20. THANK YOU! THANK YOU! @LoraVardarova