DevTools 🪄 #2024

Transcript

1. DevTools 🪄 Prisma Media - 2024
2. Settings
3. Settings > Elements • Show user agent shadow DOM • Show CSS documentation tooltip
4. Settings > Network • Disable cache while DevTools is open
5. Settings > Debugger • Disable JavaScript
6. Command
7. Command • Commande+Maj+P (Mac) • Run command, open file, snippet • Capture screenshot • Block ads
8. Multi panel Appuyer sur Echap pour ouvrir un second panneau
9. Console tab
10. Console ⚡ • Live expression • Utilities (calc, $0, copy, getEventListeners, monitorEvents) • Store as global variable • Preserve log
11. Elements tab
12. Elements ⚡ • Recherche de sélecteur (Commande+F), très pratique ! • DOM breakpoints • Force element state • Styles computed • Event listeners • Scroll into view
13. Device emulation ⚡ • Responsive vs device • Preset media queries • Show media queries • Pixel ratio (responsive only)
14. Source tab
15. Source ⚡ • Breakpoints (debugger, breakpoint, logpoint) • Call stack • Scope • Restart frame • Console panel • Workspace/overrides
16. Snippet ⚡ • Stocker des petits bouts de code • Réutilisable et accessible • … A partager entre les équipes
17. Node debugger ⚡ • Debugger un script ou une application Node.js • Prérequis ◦ Configuration VSCode ◦ Exécuter Node en mode inspection • Debug depuis VSCode (breakpoint, variable, console) • Debug depuis Chrome, chrome://inspect
18. Application tab
19. Application ⚡ • Manifest • Storage • Local storage/session storage • Cookies
20. Performance tab
21. Performance ⚡ • New home (LCP, CLS, INP) • Comparer les environnements • Enregistrement et analyse d’un rapport • Sidebar insights/annotations • Memory (ex Insights panel monitor)
22. Network tab
23. Network ⚡ • Preserve log • Network condition (cache, throttling, user agent, encoding) • Filter (extension simple/multiple, text), stats updates • Initiator • Copy request as • Size (network vs resource size)
24. Tools
25. Tools > Network request blocking • Bloquer un domaine ou une url • Désactiver par défaut et à chaque fermeture de la DevTools • Vs extension de blocage • Badge de status ⚠
26. Tools > Rendering • prefer-color-scheme • media type • prefer-reduced-motion • …
27. Tools / Coverage • Code non utilisé sur la page
28. Tools > CSS overview • Couleurs • Fonts • Media queries
29. CSS overview - Overview 1/2
30. CSS overview - Overview 2/2
31. Tools > AI assistant • Utilise Gemini (anciennement Bard) • Gratuit • Attention à la confidentialité /!\ • Ex d’analyse : style, réseaux, sources, performance • Accès au script d’analyse • Conversationnel
32. AI Assistant - Optimisation de l’accessibilité
33. AI Assistant - Optimisation des sélecteurs CSS
34. Ressources • https://developer.chrome.com/blog • https://developer.chrome.com/docs • https://umaar.com/dev-tips • Commande “What’s new” dans la DevTools • Chrome Canary pour les versions bêtas • https://nodejs.org/en/learn/getting-started/debugging