Mode 3 panneaux de l'Inspecteur

Cet article explique comment utiliser le mode 3 panneaux de l'Inspecteur.

Résumé de la fonctionnalité

Depuis Firefox 62, l'Inspecteur possède un nouveau mode : le mode 3 panneaux. Lorsqu'il est activé, il permet de voir les panneaux suivants :

The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

Note: Si la fenêtre n'est pas assez large, le panneau des onglets s'affiche en dessous du panneau des règles CSS.

Avoir les règles CSS dans leur propre panneau est très utile, car cela permet non seulement d'inspecter l'HTML et d'éditer le CSS qui lui est appliqué, mais aussi d'en voir les effets sur les fonctionnalités CSS tels que les styles calculés et les grilles en temps réel. Il suffit d'avoir les panneaux concernés d'ouvert pour voir les effets.

Un guide rapide

Le mode 3 panneaux est désactivé par défaut. Pour l'activer, il suffit d'appuyer sur le bouton en haut à gauche du panneau des onglets de l'Inspecteur.

a view of the tabs panel, showing the 2 to 3 pane toggle icon

Avant.

The Firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

Après.

The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

Avec le mode 6 panneaux activé, il est possible d'observer des changements des fonctionnalités CSS en temps réel lorsque les règles en question sont modifiées. Par exemple, il est possible d'éditer une propriété de grille CSS et d'observer les changements immédiats dans l'Inspecteur de grilles.

Activer le mode 3 panneaux avant Firefox 62

Dans les versions antérieures de Firefox (mais depuis Firefox 59/60), il est possible d'activer le mode 3 panneaux dans les versions Release/Beta en allant dans about:config et en passant les préférences suivantes à  true :

devtools.inspector.split-rule-enabled — Cela active/Désactive le mode 3 panneaux.

devtools.inspector.split-sidebar-toggle — Active le bouton UI qui permet d'activer/désactiver le mode.

Dans Firefox 61, ces préférences ont été renommés en :

  • devtools.inspector.three-pane-enabled
  • devtools.inspector.three-pane-toggle

YIl est nécessaire de passer ces deux préférences à true dans les versions Release/Beta de Firefox 61 pour tester cette fonctionnalité.

Note: Le mode 3 panneaux est activé par défaut dans les versions Nightly/Developer edition avant Firefox 62.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : maximelore
Dernière mise à jour par : maximelore,