chrome-devtools-debugger

Débogueur Chrome DevTools

Workflow général (ordre obligatoire)

Naviguer → Attendre chargement → Inspecter (snapshot) → Agir → Vérifier

1. Naviguer vers la page cible (navigate avec URL complète incluant le protocole).
2. Attendre que la page soit stable (réseau idle, DOMContentLoaded).
3. Lister les pages disponibles si plusieurs onglets, sélectionner le bon targetId.
4. Snapshot de la structure (arbre d'accessibilité) — donne les identifiants uniques pour les interactions.
5. Agir selon le besoin : clic, saisie, scroll, exécution JS.
6. Vérifier le résultat : snapshot diff, console, capture si visuel requis.

---

Scénarios courants

1. Erreurs JavaScript

naviguer → snapshot → getConsoleMessages → evalScript

• Récupérer les messages console filtrés sur level: error.
• Identifier le fichier et la ligne dans la stack trace.
• Exécuter du JS pour inspecter l'état en direct :

// Exemples copiables dans evalScript
document.querySelectorAll('[data-error]').length
window.__reactFiber !== undefined  // détecter React
performance.getEntriesByType('resource').filter(r => r.duration > 1000)

• Si l'erreur est Cannot read properties of undefined : vérifier le timing (race condition) avec document.readyState.

2. Problèmes réseau

naviguer → getNetworkRequests → filtrer → analyser

Filtres prioritaires :

Symptôme	Filtre à appliquer
Page blanche / données manquantes	status >= 400
Lenteur	duration > 2000ms
Erreur CORS	blocked: true, header Access-Control-Allow-Origin absent
CSP violation	messages console de type Content Security Policy
Waterfall lent	requêtes séquentielles au lieu de parallèles

Snippet de diagnostic réseau via evalScript :

// Ressources lentes (> 1s)
performance.getEntriesByType('resource')
  .filter(r => r.duration > 1000)
  .map(r => ({ name: r.name, duration: Math.round(r.duration) }))

3. Analyse de performance