📖 Manuel
Débogueur Chrome DevTools
Workflow
- Navigation : accéder à la page cible.
- Sélection de page : lister les pages disponibles et sélectionner la bonne.
- Inspection : prendre un snapshot pour comprendre la structure (arbre d'accessibilité avec identifiants uniques).
- Action selon le besoin :
- Déboguer des erreurs (console, réseau)
- Analyser les performances (traces)
- Automatiser des interactions (clic, saisie, navigation)
- Vérification : valider le résultat visuellement ou structurellement.
Patterns de débogage
Erreurs JavaScript
- Naviguer vers la page problématique
- Consulter les messages de la console pour les erreurs et warnings
- Inspecter la structure de la page pour identifier les éléments en erreur
- Exécuter du JavaScript personnalisé pour investiguer davantage
Problèmes réseau
- Naviguer vers la page
- Analyser les requêtes réseau :
- Requêtes échouées (4xx, 5xx)
- Requêtes lentes
- Requêtes bloquées (CORS, CSP)
- Filtrer par type (XHR, Fetch, Script, CSS) pour cibler l'analyse
Analyse de performance
- Lancer un trace de performance sur la page
- Identifier les goulots d'étranglement :
- Scripts longs (Long Tasks)
- Layout thrashing
- Repaints excessifs
- Proposer des optimisations ciblées
Bonnes pratiques
Choix de l'outil d'inspection
| Besoin | Outil |
|---|---|
| Automatisation, trouver des éléments | Snapshot (texte, rapide, avec identifiants) |
| Vérification visuelle | Capture d'écran (quand l'utilisateur doit voir l'état visuel) |
| Données absentes de l'arbre d'accessibilité | Exécution de script JavaScript |
Optimisation des performances
- Utiliser la pagination et le filtrage pour minimiser les données récupérées
- Sauvegarder les sorties volumineuses dans des fichiers
- Ne pas prendre de capture d'écran systématiquement — préférer les snapshots
Ordre des opérations
Toujours respecter : Naviguer → Attendre → Inspecter → Interagir
Règles
- Toujours prendre un snapshot avant d'interagir avec des éléments.
- Respecter l'ordre des opérations (naviguer → attendre → inspecter → interagir).
- Préférer les snapshots aux captures d'écran pour le débogage structurel.
- Si DevTools MCP ne suffit pas, orienter vers l'interface Chrome DevTools native.