# Référence rapide Chrome DevTools

*Éléments, Console, Réseau, Performances, débogage*

> Source: Chrome DevTools Documentation (developer.chrome.com/docs/devtools) · MIT

## Éléments

### Inspection et édition

| Command | Description |
|---------|-------------|
| `Clic droit → Inspecter` | Ouvrir le panneau Éléments pour l'élément |
| `Double-clic sur tag/attribut` | Modifier le HTML en ligne |
| `Touche Suppr` | Supprimer le nœud sélectionné |
| `Ctrl+Z` | Annuler le changement DOM |
| `Touche H` | Basculer la visibilité de l'élément sélectionné |
| `Glisser un nœud` | Déplacer l'élément dans l'arbre DOM |

### Panneau Styles

| Command | Description |
|---------|-------------|
| `element.style {}` | Ajouter des styles inline à l'élément |
| `Cliquer sur une valeur` | Modifier la valeur CSS en direct |
| `Case à cocher d'une règle` | Activer/désactiver une propriété CSS |
| `Bouton :hov` | Forcer les pseudo-états (:hover, :focus) |
| `Bouton .cls` | Ajouter/supprimer des classes CSS |
| `Échantillon de couleur` | Ouvrir le sélecteur de couleur |
| `Onglet Calculé` | Voir les valeurs CSS calculées finales |

## Console

### API Console

```
console.log("info");          console.warn("warning");
console.error("error");       console.table(arrayOrObj);
console.group("label");       console.groupEnd();
console.time("t"); /*...*/ console.timeEnd("t");
```

### Utilitaires Console

| Command | Description |
|---------|-------------|
| `$0` | Élément actuellement sélectionné dans Éléments |
| `$('sel') / $$('sel')` | Raccourci querySelector / querySelectorAll |
| `copy(obj)` | Copier l'objet en chaîne vers le presse-papiers |
| `clear()` | Effacer la sortie de la console |
| `monitor(fn)` | Journaliser les appels à la fonction fn |
| `monitorEvents(el, 'click')` | Journaliser les événements sur l'élément |
| `keys(obj) / values(obj)` | Clés / valeurs de l'objet |
| `$_ ` | Résultat de la dernière expression évaluée |

### Filtrage

| Command | Description |
|---------|-------------|
| `Liste déroulante niveaux de log` | Filtrer par verbose/info/warn/error |
| `Zone de filtre texte` | Rechercher dans la sortie de la console |
| `-url:extension` | Exclure les messages par URL source |
| `Liste déroulante context:` | Filtrer par contexte iframe/worker |

## Réseau

### Fonctionnalités du panneau Réseau

| Command | Description |
|---------|-------------|
| `Barre de filtre` | Filtrer par type : XHR, JS, CSS, Img, Doc, WS |
| `Recherche (Ctrl+F)` | Rechercher dans tous les corps de requête/réponse |
| `Conserver le journal` | Garder le journal lors de la navigation |
| `Désactiver le cache` | Contourner le cache navigateur avec DevTools ouvert |
| `Liste déroulante limitation` | Simuler 3G lent, 3G rapide, Hors ligne |
| `Bloquer l'URL de requête` | Clic droit → Bloquer URL |

### Onglets des détails de requête

| Command | Description |
|---------|-------------|
| `En-têtes` | En-têtes de requête/réponse, code de statut |
| `Charge utile` | Corps POST, paramètres de requête |
| `Aperçu` | Réponse formatée (JSON, HTML, image) |
| `Réponse` | Corps de réponse brut |
| `Chronologie` | DNS, connexion, TLS, TTFB, téléchargement |
| `Initiateur` | Trace de pile déclenchant la requête |
| `Cookies` | Cookies envoyés/reçus |

### Copier et exporter

| Command | Description |
|---------|-------------|
| `Clic droit → Copier en cURL` | Copier la requête comme commande cURL |
| `Copier en fetch` | Copier en JavaScript fetch() |
| `Exporter HAR` | Exporter toutes les requêtes en fichier HAR |
| `Copier la réponse` | Copier le corps de réponse dans le presse-papiers |

## Sources

### Points d'arrêt

| Command | Description |
|---------|-------------|
| `Clic sur numéro de ligne` | Activer/désactiver un point d'arrêt |
| `Clic droit → Conditionnel` | S'arrêter uniquement si l'expression est vraie |
| `Clic droit → Logpoint` | Journaliser sans interrompre l'exécution |
| `Point d'arrêt DOM` | S'arrêter sur modification sous-arbre/attribut/suppression |
| `Point d'arrêt XHR/Fetch` | S'arrêter quand l'URL contient une chaîne |
| `Point d'arrêt sur événement` | S'arrêter sur des types d'événements spécifiques |

### Contrôles du débogueur

| Command | Description |
|---------|-------------|
| `F8 / Ctrl+\` | Reprendre / suspendre l'exécution |
| `F10` | Passer par-dessus l'appel de fonction |
| `F11` | Entrer dans l'appel de fonction |
| `Shift+F11` | Sortir de la fonction courante |
| `Ctrl+Shift+P → "never pause"` | Désactiver tous les points d'arrêt |

### Panneaux de débogage

| Command | Description |
|---------|-------------|
| `Watch` | Surveiller les valeurs d'expressions |
| `Scope` | Variables locales, fermetures, globales |
| `Call Stack` | Chaîne d'appels de fonctions |
| `Snippets` | Enregistrer et exécuter du code JS réutilisable |

## Performances

### Enregistrement

| Command | Description |
|---------|-------------|
| `Bouton Enregistrer (Ctrl+E)` | Démarrer/arrêter l'enregistrement des performances |
| `Bouton Recharger` | Enregistrer les performances au chargement de page |
| `Case Captures d'écran` | Capturer la chronologie visuelle |
| `Liste déroulante CPU` | Simuler un ralentissement CPU 4x/6x |
| `Limitation réseau` | Simuler un réseau lent pendant l'enregistrement |

### Lire le graphe en flamme

| Command | Description |
|---------|-------------|
| `Piste principale` | Exécution JavaScript (graphe en flamme) |
| `Piste Réseau` | Chronologie des requêtes réseau |
| `Piste Frames` | FPS et durées de frames |
| `Piste Timings` | Marqueurs FCP, LCP, DCL, Load |
| `Barres jaunes` | JavaScript (scripting) |
| `Barres violettes` | Mise en page / rendu |
| `Barres vertes` | Peinture / composition |

### Bottom-Up et Résumé

| Command | Description |
|---------|-------------|
| `Onglet Résumé` | Répartition du temps : scripting, rendu, etc. |
| `Onglet Bottom-Up` | Fonctions les plus coûteuses en premier |
| `Onglet Call Tree` | Hiérarchie d'appels de la racine aux feuilles |
| `Onglet Event Log` | Liste chronologique des événements |

## Application

### Stockage

| Command | Description |
|---------|-------------|
| `Local Storage` | Afficher/modifier les paires clé-valeur par origine |
| `Session Storage` | Afficher/modifier le stockage de session |
| `IndexedDB` | Inspecter les magasins d'objets et les enregistrements |
| `Cookies` | Afficher/modifier/supprimer les cookies par domaine |
| `Cache Storage` | Inspecter les caches Service Worker |
| `Effacer le stockage` | Effacer en masse les types de stockage sélectionnés |

### Service Workers et Manifest

| Command | Description |
|---------|-------------|
| `Service Workers` | Voir l'enregistrement, le statut, push/sync |
| `Mettre à jour au rechargement` | Forcer la mise à jour du SW à chaque rechargement |
| `Contourner pour le réseau` | Ignorer le SW et aller au réseau |
| `Manifest` | Voir les détails du manifeste de l'application web |
| `Case Hors ligne` | Simuler le mode hors ligne |

## Lighthouse

### Lancer des audits

| Command | Description |
|---------|-------------|
| `Mode : Navigation` | Audit complet du chargement de page |
| `Mode : Timespan` | Auditer les interactions utilisateur dans le temps |
| `Mode : Snapshot` | Auditer l'état actuel de la page |
| `Catégories` | Performances, Accessibilité, Bonnes pratiques, SEO |
| `Appareil` | Simulation mobile ou bureau |

### Métriques clés

| Command | Description |
|---------|-------------|
| `FCP (First Contentful Paint)` | Temps jusqu'au premier contenu visible |
| `LCP (Largest Contentful Paint)` | Temps jusqu'au plus grand élément visible |
| `TBT (Total Blocking Time)` | Somme du temps de blocage des tâches longues |
| `CLS (Cumulative Layout Shift)` | Score de stabilité visuelle |
| `SI (Speed Index)` | Rapidité de remplissage visuel du contenu |
| `INP (Interaction to Next Paint)` | Réactivité aux entrées utilisateur |

## Raccourcis

### Ouvrir DevTools

| Command | Description |
|---------|-------------|
| `F12 / Ctrl+Shift+I` | Ouvrir/fermer DevTools |
| `Ctrl+Shift+J` | Ouvrir le panneau Console |
| `Ctrl+Shift+C` | Ouvrir Éléments + mode inspection |
| `Ctrl+Shift+M` | Basculer la barre d'outils d'appareil (responsive) |

### Navigation et recherche

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+P` | Menu de commandes (toute action) |
| `Ctrl+P` | Ouvrir un fichier (Aller au fichier) |
| `Ctrl+Shift+F` | Rechercher dans toutes les sources |
| `Ctrl+G` | Aller au numéro de ligne dans Sources |
| `Ctrl+[ / Ctrl+]` | Basculer entre les panneaux |

### Édition et Console

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+D` | Basculer la position d'ancrage de DevTools |
| `Ctrl+L (Console)` | Effacer la sortie de la console |
| `Shift+Entrée (Console)` | Saisie multi-ligne |
| `Échap` | Basculer le tiroir console |
| `Ctrl+K (Console)` | Effacer la console |

## Débogage mobile

### Barre d'outils d'appareil

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+M` | Basculer la barre d'outils d'appareil |
| `Liste déroulante appareil` | Dimensions prédéfinies téléphone/tablette |
| `Mode responsive` | Redimensionner librement le viewport |
| `Liste déroulante DPR` | Changer le ratio de pixels |
| `Limitation` | Simuler CPU + réseau mobile |
| `Afficher les media queries` | Visualiser les points de rupture CSS |

### Débogage à distance (Android)

| Command | Description |
|---------|-------------|
| `1. Activer le débogage USB` | Paramètres → Options développeur sur l'appareil |
| `2. Connecter USB` | Connecter l'appareil Android à l'ordinateur |
| `3. chrome://inspect` | Ouvrir dans Chrome bureau |
| `4. Cliquer Inspecter` | Ouvrir DevTools pour la page mobile |

*Nécessite Chrome sur le bureau et l'appareil Android*

### Remplacements des capteurs

| Command | Description |
|---------|-------------|
| `Géolocalisation` | Remplacer les coordonnées GPS |
| `Orientation` | Simuler l'orientation de l'appareil |
| `Tactile` | Simuler les événements tactiles |
| `Détection d'inactivité` | Remplacer l'API de détection d'inactivité |

## Patterns courants

### Déboguer les problèmes réseau

```
// Dans la Console : surveiller toutes les requêtes fetch
const origFetch = window.fetch;
window.fetch = (...args) => {
  console.log('fetch:', args);
  return origFetch(...args);
};
```

### Workflow de performances

| Command | Description |
|---------|-------------|
| `1. Audit Lighthouse` | Identifier les principaux problèmes de performance |
| `2. Enregistrement de performance` | Trouver les tâches longues dans le graphe en flamme |
| `3. Onglet Couverture` | Trouver le CSS/JS inutilisé (Ctrl+Shift+P → Coverage) |
| `4. Cascade réseau` | Identifier les ressources bloquantes |
| `5. Onglet Rendu` | Visualiser la peinture/mise en page (Ctrl+Shift+P → Rendering) |

### Extraits de console utiles

```
// Lister tous les écouteurs d'événements sur un élément
getEventListeners($0);

// Surveiller les décalages de mise en page
new PerformanceObserver(l => l.getEntries().forEach(
  e => console.log('CLS:', e)
)).observe({ type: 'layout-shift', buffered: true });
```