Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :

  • Le bouton de sélection d'éléments
  • Le panneau HTML
  • Le panneau CSS

The all-new Inspector panel in Firefox 57.Ce guide est volontairement bref. Des liens vous permettent d'accéder aux pages détaillées expliquant le fonctionnement de l'inspecteur.

Le bouton de sélection d'éléments

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 de sélectionner un élément pour l'inspecter :

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

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, voir 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:

These are the tasty new HTML and CSS panes in Firefox 57.

Pour en savoir plus sur la structure du panneau HTML, voir la page "Examiner et éditer le code HTML".

Le panneau CSS

La partie droite est occupée par le panneau CSS :

The rules view within the Inspector.Ce panneau CSS est composé de 5 vues :

  • Règles
  • Calculé
  • Disposition
  • Animations
  • Polices

Utilisez ces onglets pour passer d'une vue à une autre.

Note : Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du mode à trois panneaux.

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.

Voir "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électionné, ainsi qu'une représentation visuelle éditable du modèle de boite.

The Computed view within the Inspector.

 

Pour en savoir plus sur le modèle de boite, voir "Examiner et éditer le modèle de boite". Il est a noter qu'avant Firefox 50, le modèle de boite n'apparaissait pas dans cet onglet puisqu'il avait le sien.

Pour plus de détails sur les déclarations CSS de cette vue, voir "Examiner le CSS calculé".

La vue "Polices"

Cette vue liste toutes les polices présentes dans la page, ainsi que des exemples éditables.

 

The all-new Inspector panel in Firefox 57.

Voir "Voir les polices" 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.

 

This is the Animations pane in the Firefox 57 Inspector.

 

Voir "Travailler avec les animations" pour plus de détails.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : maximelore, wbamberg, fixius69gggg, hutrd, clementpolito
Dernière mise à jour par : maximelore,