Utilisez le mode d'inspection pour vous concentrer sur des éléments spécifiques de votre page Web et les analyser.
Présentation
Activer le mode d'inspection des outils de développement (sélecteur) vous permet de pointer sur les éléments de votre page et d'afficher des informations sur le style et l'accessibilité. Cliquez sur un élément lorsque le mode d'inspection est actif pour mettre en surbrillance l'élément DOM correspondant dans l'arborescence DOM du panneau Elements (Éléments) et afficher les styles pertinents dans l'onglet Styles.
Activer le mode d'inspection
Pour activer le mode Inspection:
- Ouvrez les DevTools.
- Cliquez sur le bouton Mode d'inspection dans la barre d'action.
Le sélecteur est actif lorsque l'icône Mode inspection est bleue.
Vous pouvez également utiliser un raccourci dans Chrome pour ouvrir le panneau Éléments en mode inspection. Appuyez sur l'une des touches suivantes:
- macOS: Cmd+Option+C
- Windows, Linux et ChromeOS: Ctrl+Maj+C
Utiliser le mode Inspection pour afficher des informations sur le style et l'accessibilité
Lorsque le mode d'inspection est actif, pointez sur les éléments de votre page pour les mettre en surbrillance et afficher une info-bulle en superposition. Le panneau Éléments développe automatiquement l'arborescence DOM pour mettre en surbrillance l'élément sur lequel vous pointez.
En fonction de l'élément, l'info-bulle du mode Inspecter affiche les propriétés de style suivantes:
- Sélecteurs de l'élément.
- Dimensions de l'élément, en pixels.
- Couleur d'arrière-plan de l'élément.
- Couleur du texte de l'élément.
- Propriétés de la police de l'élément.
- Marges internes de l'élément, en pixels.
- Marge de l'élément, en pixels.
De plus, une icône différente s'affiche à côté du nom des éléments qui utilisent la grille CSS ou la flexbox CSS.
La section "Accessibilité" de l'info-bulle affiche les informations suivantes:
- Nom et rôle de l'élément signalé à la technologie d'assistance.
- Indique si l'élément peut être sélectionné au clavier.
Si vous pointez sur les titres de texte en particulier, un rapport de contraste s'affiche. Il mesure la différence de luminosité entre les couleurs de premier plan (couleur du texte) et d'arrière-plan.
Un bon rapport de contraste est essentiel pour rendre le texte lisible. Découvrez comment corriger les problèmes de texte à faible contraste.
Persistance et masquage de l'info-bulle du mode d'inspection
Pour conserver l'info-bulle du mode Inspection tout en pouvant déplacer le pointeur de la souris ailleurs, appuyez de manière prolongée sur:
- macOS: Ctrl+Option
- Windows, Linux et ChromeOS: Ctrl+Alt
Pour masquer temporairement l'info-bulle d'inspection lorsque vous déplacez le pointeur de la souris, appuyez de manière prolongée sur Ctrl.
Inspecter les éléments non accessibles
Les éléments avec la propriété CSS pointer-events: none; ne peuvent pas être ciblés par le mode d'inspection au départ.
Pour inspecter les éléments non accessibles, appuyez sur la touche Maj tout en pointant sur l'élément.
