1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
---
title: Mode 3 panneaux de l'Inspecteur
slug: Tools/Page_Inspector/3-pane_mode
translation_of: Tools/Page_Inspector/3-pane_mode
original_slug: Outils/Inspecteur/3-pane_mode
---
<div>{{ToolsSidebar}}</div>
<p class="summary">Cet article explique comment utiliser le mode 3 panneaux de l'Inspecteur.</p>
<h2 id="Résumé_de_la_fonctionnalité">Résumé de la fonctionnalité</h2>
<p>Depuis Firefox 62, l'<a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a> possède un nouveau mode : le mode 3 panneaux. Lorsqu'il est activé, il permet de voir les panneaux suivants :</p>
<ul>
<li>Le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">panneau HTML</a> sur la gauche, comme de coutume.</li>
<li>Le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">panneau des règles CSS</a> au milieu dans son panneau personnel plutôt que dans un onglet.</li>
<li>Les autres fonctionnalités CSS. Par exemple <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">l'onglet Calculé</a>, <a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">l'onglet Animations</a>, et <a href="/fr/docs/Tools/Page_Inspector/How_to/View_fonts">l'onglet Polices</a>— sur la droite.</li>
</ul>
<p><img alt="The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
<div class="note">
<p><strong>Note</strong>: Si la fenêtre n'est pas assez large, le panneau des onglets s'affiche en dessous du panneau des règles CSS.</p>
</div>
<p>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.</p>
<h2 id="Un_guide_rapide">Un guide rapide</h2>
<p>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.</p>
<p><img alt="a view of the tabs panel, showing the 2 to 3 pane toggle icon" src="https://mdn.mozillademos.org/files/15937/toggle-icon-final.png" style="display: block; height: 241px; margin: 0px auto; width: 410px;"></p>
<p>Avant.</p>
<p><img alt="The Firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15936/2-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 1195px;"></p>
<p>Après.</p>
<p><img alt="The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">grille CSS</a> et d'observer les changements immédiats dans l'<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspecteur de grilles</a>.</p>
<p>{{EmbedYouTube("ELS2OOUvxIw")}}</p>
<h2 id="Activer_le_mode_3_panneaux_avant_Firefox_62">Activer le mode 3 panneaux avant Firefox 62</h2>
<p>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 à <code>true</code> :</p>
<p><code>devtools.inspector.split-rule-enabled</code> — Cela active/Désactive le mode 3 panneaux.</p>
<p><code>devtools.inspector.split-sidebar-toggle</code> — Active le bouton UI qui permet d'activer/désactiver le mode.</p>
<p>Dans Firefox 61, ces préférences ont été renommés en :</p>
<ul>
<li><code>devtools.inspector.three-pane-enabled</code></li>
<li><code>devtools.inspector.three-pane-toggle</code></li>
</ul>
<p>YIl est nécessaire de passer ces deux préférences à <code>true</code> dans les versions Release/Beta de Firefox 61 pour tester cette fonctionnalité.</p>
<div class="note">
<p><strong>Note</strong>: Le mode 3 panneaux est activé par défaut dans les versions Nightly/Developer edition avant Firefox 62.</p>
</div>
|
