Cet article nécessite une relecture technique. Voici comment vous pouvez aider.
Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.
Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.
Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :
- le boutton de sélection d'élément
- le panneau HTML
- le panneau CSS
Ce guide est volontairement bref. Des liens vous permettent d'accéder aux pages détaillées expliquant le fonctionement de l'inspecteur.
Le bouton de sélection d'élément
L'inspecteur donne accès à des informations détaillées à propos de l'élément sélectionné. Ce bouton est l'une des façons permettant de sélectionner un élément pour l'inspecter.
Notez qu'il fait partie de la barre d'outils de la boîte à outils, et qu'il est immédiatement accessible depuis n'importe quel outil, pas seulement depuis l'inspecteur.
Pour savoir comment sélectionner un élément, lisez le guide pour sélectionner un élément.
Le panneau HTML
L'inspecteur est divisé en deux parties. Celle de gauche est occupée par le panneau HTML.
Pour en savoir plus sur la structure du panneau HTML, lisez la page "Examiner et éditer le code HTML".
Le panneau CSS
La partie droite est occupée par le panneau CSS.
Ce panneau CSS est composé de 5 vues :
- Règles
- Calculé
- Polices
- Modèle de boîte
- Animations
Utilisez ces onglets pour passer d'une vue à une autre.
La vue "Règles"
Cette vue liste toutes les règles CSS qui s'appliquent à l'élément sélectionné. Les règles sont ordonnées de la plus précise à la moins précise.
Lisez "Examiner et éditer le CSS" pour plus de détails.
La vue "Calculé"
Cette vue liste toutes les règles CSS calculées pour l'élément séléctionné.
Pour plus de détails, lisez "Examiner et éditer le CSS".
La vue "Polices"
Cette vue liste toutes les polices présentes dans la page.
Lisez "Voir les polices" pour plus de détails.
La vue "Modèle de boîte"
Cette vue permet d'éditer le modèle de boîte de l'élément sélectionné.
Lisez "Examiner et modifier le modèle de boîte" pour plus de détails.
La vue "Animations"
Cette vue apporte des détails sur les animations relatives à l'élément sélectionné, ainsi qu'un contrôleur pour les interrompre.
Lisez "Travailler avec les animations" pour plus de détails.
Afficher/Masquer le panneau CSS
Depuis Firefox 40, il y a un boutton dans la barre d'outils que vous pouvez utiliser pour afficher ou masquer le panneau CSS :
