diff options
Diffstat (limited to 'files/fr/tools/page_inspector')
24 files changed, 1660 insertions, 0 deletions
diff --git a/files/fr/tools/page_inspector/3-pane_mode/index.html b/files/fr/tools/page_inspector/3-pane_mode/index.html new file mode 100644 index 0000000000..763f953ad3 --- /dev/null +++ b/files/fr/tools/page_inspector/3-pane_mode/index.html @@ -0,0 +1,65 @@ +--- +title: Mode 3 panneaux de l'Inspecteur +slug: Outils/Inspecteur/3-pane_mode +translation_of: Tools/Page_Inspector/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> diff --git a/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html b/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html new file mode 100644 index 0000000000..75d7f15f39 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html @@ -0,0 +1,37 @@ +--- +title: Edition des filtres CSS +slug: Outils/Inspecteur/Comment/Edition_filtres_css +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters +--- +<div>{{ToolsSidebar}}</div> + +<p>Les propriétés <code><a href="/fr/docs/Web/CSS/filter">filter</a></code> dans la <a href="/fr/docs/Outils/Inspecteur/UI_Tour#Rules_view">vue Règles</a> ont une icône ronde à fond gris/blanc : </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16454/click_to_edit_filter.png" style="border: 1px solid black; display: block; height: 146px; margin-left: auto; margin-right: auto; width: 366px;"></p> + +<p>Cliquer sur le rond ouvre l'éditeur de filtre :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16455/css_filter_edit.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 576px;"></p> + +<p>L'éditeur de filtre liste chaque effet sur sa propre ligne. Il est alors possible d'ajouter, de supprimer, d'éditer les filtres et de changer l'ordre dans lesquels ils sont appliqués</p> + +<p>Il est également possible d'ajouter de nouveaux effets grâce à la liste en bas de l'éditeur. Il suffit de cliquer sur le bouton "+" une fois l'effet voulu sélectionné dans la liste.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16457/edit_filter_settings.png" style="display: block; height: 255px; margin: 0px auto; width: 520px;"></p> + +<p>Une fois l'effet rajouté, il faut spécifier les paramètres voulus puis appuyer sur <kbd>Entrée</kbd> pour mettre a jour l'effet. Le changement sera effectif après <kbd>Entrée</kbd>.</p> + +<h2 id="Enregistrer_des_filtres">Enregistrer des filtres</h2> + +<p>Il est possible d'ajouter des filtres à une liste de configuration. La liste sera persistante aux entre plusieurs sessions du navigateur, rendant ainsi l'application d'effets facile dans le futur.</p> + +<p>Voici comment enregistrer le filtre actuel dans la liste :</p> + +<ul> + <li>Cliquer pour éditer le filtre, afficher la liste de configuration en cliquant sur l’icône mise en avant dans la capture ci-dessous.</li> + <li>Nommez votre configuration, puis cliquer sur le bouton "+" pour l'ajouter à la liste.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16458/filter_presets.png" style="display: block; height: 240px; margin-left: auto; margin-right: auto; width: 530px;"></p> + +<p>Il est ainsi possible d'appliquer des filtres sauvegardés à de nouveaux éléments. Il suffit de cliquer sur le nom d'une des configuration dans la liste.</p> diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..c193dc25cd --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,228 @@ +--- +title: Examiner et modifier le CSS +slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS +tags: + - Guide + - Inspector + - tool +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +<div>{{ToolsSidebar}}</div><p>Il est possible d'examiner et d'éditer le CSS via le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>.</p> + +<h2 id="Examiner_les_règles_CSS">Examiner les règles CSS</h2> + +<p><a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">L'onglet des règles </a>liste toutes les règles qui s'appliquent à l'élément sélectionné, ordonnés du plus spécifique au moins spécifique :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Une icône d'avertissement apparaitera à coté des styles non supportés ou invalides. Cela peut servir à comprendre pourquoi certains styles ne sont pas appliqués :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Affichage_des_règles">Affichage des règles</h3> + +<p>Chaque règle est affichée comme dans une feuille de style : une liste de sélecteurs suivis des déclarations de type<code> propriété:valeur;</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<ul> + <li><em>Afficher en surbrillance les éléments correspondants</em>: à côté du sélecteur, se trouve une icône en forme de cible. Cliquer sur celle-ci affichera tous les noeuds de la page qui correspondent à ce sélecteur.</li> + <li><em>Déclaration surchargée</em>: les styles qui sont surchargés par des règles suivantes sont affichés "barrés". Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">déclarations surchargées</a></li> + <li><em>Afficher la cascade</em>: à côté des déclarations surchargées, se trouve une icône en forme de loupe. Cliquer sur celle-ci affiche la cascade de règles contenant la propriété surchargée. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">déclarations surchargées</a></li> + <li><em>Activer/Désactiver</em>: Lors du survol d'une déclaration, une case à cocher apparait à côté de cette déclaration. Cette case sert à activer.désactiver la règle.</li> + <li><em>Nom de fichier et numéro de ligne</em>: dans la partie droite, on retrouve un lien vers la règle. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">lien vers le fichier CSS</a>.</li> +</ul> + +<p>Depuis Firefox 52, si un élément à une déclaration <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code>, alors une icône en forme de grille (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) apparait. Cliquer sur cette icône affiche une grille par-dessus la page. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">examiner les grilles</a> pour plus d'informations.</p> + +<p>Pour lister les <a href="/fr/docs/Web/CSS/Cascade">user-agent styles</a> (les styles appliqués par le navigateur), il faut activer l'option « Afficher les styles du navigateur » dans les <a href="/fr/docs/Outils/Outils_boite_à_outils#Inspecteur">options des outils de développement</a>. Il est à noter que cette option est indépendante de l'option « Styles navigateur » présente dans <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#.C3.89xaminer_le_CSS_calcul.C3.A9">l'onglet « Calculé »</a>.</p> + +<p>Les user-agent styles sont affichés sur un fond différent et le lien vers la feuille de style contient le préfixe <code>(user agent)</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<h3 id="element_rule">element {} rule</h3> + +<p>La règle <code>élément {}</code> en haut de la liste des règles n'est pas réellement une règle CSS. C'est simplement la représentation des propriétés CSS assignée à l'élément via sont attribut {{htmlattrxref("style")}}.</p> + +<p>A partir de Firefox 52, cette règle obtient sa propre icône de cible (<img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">). Cela permet d'affiche facilement l'élément sélectionné de la page.</p> + +<p>{{EmbedYouTube("bQzOAFvEDco")}}</p> + +<h3 id="Filtrer_les_règles">Filtrer les règles</h3> + +<p>La boite "Filtrer les styles" se trouve en haut de l'onglet des règles :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;">Écrire une expression dans cette boite a pour effet que :</p> + +<ul> + <li>Toute règle ne contenant pas la chaine caractère tapée est cachée.</li> + <li>Toute déclaration contenant la chaine tapée est mise en surbrillance</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Cliquer sur l'icône en forme de "X" à la fin de la boîte supprime le filtre.</p> + +<div class="note"> +<p>Si l'onglet des règles est sélectionné, il est possible d'appuyer sur <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> pour sélectioner le champ de recherche. Il est alors possible d'appuyer sur <kbd>Esc</kbd> pour supprimer le filtre.</p> +</div> + +<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p> + +<h4 id="Recherche_stricte">Recherche stricte</h4> + +<p>Par défaut, la recherche affiche toutes les déclarations qui contiennent une partie de la chaine de caractère de la recherche. Par exemple filtrer avec "color" afficher les déclarations contenant <code><a href="/fr/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> et <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code> en plus de <code><a href="/fr/docs/Web/CSS/color">color</a></code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Si l'expression de recherche est encadrée ainsi : `color`, alors la recherche n'affiche que les correspondances exactes :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Étendre_les_propriétées_raccourcies">Étendre les propriétées raccourcies</h3> + +<p><a href="/fr/docs/Web/CSS/Shorthand_properties">Les propriétées raccourcies</a> peuvent être étendues pour afficher leur noms complets en cliquant sur la flèche à coté de celles-ci.</p> + +<h3 id="Afficher_les_pseudo-elements">Afficher les pseudo-elements</h3> + +<p>L'onglet des règles peut afficher les <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> suivant, si ceux ci sont appliqués à l'élément sélectioné :</p> + +<p><code>::after<br> + ::backdrop</code><br> + <code>::before<br> + ::first-letter<br> + ::first-line<br> + ::selection<br> + :-moz-color-swatch<br> + :-moz-number-spin-box<br> + :-moz-number-spin-down<br> + :-moz-number-spin-up<br> + :-moz-number-text<br> + :-moz-number-wrapper<br> + :-moz-placeholder<br> + :-moz-progress-bar<br> + :-moz-range-progress<br> + :-moz-range-thumb<br> + :-moz-range-track<br> + :-moz-selection</code></p> + +<p>Si l'élément sélection possède des pseudo-éléments appliqués, ils sont affichés avant la règle "élément", mais sont cachés par l'icone en forme de triangle :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p> + +<p>Cliquer sur cette icône affiche les pseudo-éléments :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<h3 id="Activer_hover_active_focus">Activer :hover, :active, :focus</h3> + +<p>Il y a un bouton à droite de la boite de recherche :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">Cliquer sur ce bouton afficher trois cases à cocher qui permettent d'activer les pseudo-classes {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} pour l'élément sélectionné :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">Cette fonctionnalité est également accessible depuis le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menu popup de l'onglet HTML</a>.</p> + +<p>Si une de ces classes est activée pour un noeud, un point orange apparait dans l'onglet HTML pour chaque noeud pour lesquels la pseudo-classe a été appliquée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Lien_vers_le_fichier_CSS">Lien vers le fichier CSS</h3> + +<p>En haut à droite de chaque règle, le nom du fichier source et le numéro de ligne de la règle est affiché sous forme de lien. Cliquer sur ce lien ouvre le fichier dans <a href="/fr/docs/Outils/Éditeur_de_style">l'éditeur de style</a>.</p> + +<p>Il est possible de copier l'emplacement du fichier source. Il suffit pour cela de faire un clic droit sur le lien et de sélectionner "Copier l'adresse".</p> + +<p>L'inspecteur comprend les source maps CSS. Cela signifie que si vous utilisez un préprocesseur CSS qui supporte les source maps, et que vous avez activé l'option « Afficher les sources originales » dans les <a href="/fr/docs/Outils/Outils_boite_à_outils#.C3.89diteur_de_style">options de l'éditeur de style</a>, alors le lien pointera vers la source originale pas vers le CSS généré. Vous pouvez en apprendre plus sur le support des source map CSS dans la <a href="/fr/docs/Outils/Éditeur_de_style#Support_de_.22Source_map.22">documentation de l'éditeur de style</a>.</p> + +<h3 id="Déclarations_surchargées">Déclarations surchargées</h3> + +<p>Si une déclaration CSS est surchargée par une autre règle avec plus d'importance, cette déclaration est affichée "barrée".</p> + +<p>Les déclarations surchargées ont une icône en forme de loupe à côté d'elles. Cliquer sur cette icône filtra les propriétés du noeud pour n'afficher que celles contenant des déclarations qui essayent de configurer la même propriété : Il s'agit d'une cascade complète pour une propriété donnée.</p> + +<p>Cela permet de savoir quelle règle surcharge quelle déclaration :</p> + +<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p> + +<h2 id="Examiner_le_CSS_calculé">Examiner le CSS calculé</h2> + +<p>Pour voir le CSS calculé intégral pour l'élément sélectionné, il faut ouvrir <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Computed_view">l'onglet « Calculé »</a>. Cet onglet montre la valeur calculée de chaque propriété CSS pour l'élément sélectionné :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>Il est possible d'utiliser <kbd>Tab</kbd> pour itérer parmi les éléments. Depuis Firefox 49, ile st possible d'obtenir plus d'information sur la propriété sélectionnée en pressant <kbd>F1</kbd> . Cela affiche la page MDN en référence à la propriété.</p> + +<p>Cliquer sur la flèche à côté du nom d'une propriété (ou presser <kbd>Entrée</kbd> ou <kbd>Espace</kbd> si elle est sélectionnée) affiche la règle qui fixe cette valeur, ainsi qu'un lien vers le fichier source :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>Par défaut, cet onglet n'affiche que les valeurs qui ont été explicitement définies par la feuille de style. Pour voir toutes les valeurs, il faut cocher la case « Styles navigateur ».</p> + +<p>Effectuer une saisie dans la boite de recherche applique un filtre en temps réel sur la liste. Ainsi, si, par exemple, vous souhaitez uniquement afficher uniquement les paramètres liés aux polices d'écriture, vous pouvez taper « font » dans la boîte de recherche et seules les propriétés dont le nom contient « font » seront listées. Il est également possible de chercher les valeurs des propriétés : par exemple pour trouver la règle qui définit la police « Lucida Grande », il suffit de saisir cette valeur dans le champ de recherche.</p> + +<div class="note"> +<p>Dans l'onglet des règles calculé, il est possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> pour sélectioner le champ de recherche. Ensuite il est possible de supprimer la recherche avec <kbd>Esc</kbd>.</p> +</div> + +<h2 id="Modifier_les_règles">Modifier les règles</h2> + +<p>Cliquer sur une déclaration ou un sélecteur dans l'onglet des règles permet de les éditer et d'observer immédiatement le résultat. Il est également possible de parcourir les différentes propriétés et valeurs avec <kbd>Tab</kbd>, et de les éditer avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>. Pour ajouter une nouvelle déclaration, il faut cliquer sur la dernière ligne de la règle (celle où il y a l’accolade fermante).</p> + +<p>Alors que le nom de la propriété est en train d'être écrite, une liste d'auto complétions s'affiche. Appuyer sur <kbd>Tab </kbd> accepte la suggestion sélectionnée, et <kbd>Flèche Haut</kbd> et <kbd>Flèche Bas</kbd> permettent de se déplacer dans la liste. La suggestion sélectionnée par défaut est la propriété la plus commune commençant par les lettres tapées. Ici par exemple, l'utilisateur à tapé "c", et le choix par défaut est "color" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>Si le nom de la propriété est erroné ou inconnu, une icône jaune d'alerte s'affichera alors à côté de la déclaration.</p> + +<div class="note"> +<p><strong>Note</strong>: Depuis Firefox 60 les <a href="/fr/docs/Web/CSS/Using_CSS_variables">noms de variable CSS</a> sont également autocomplétés (voir {{bug(1422635)}}). Taper <code>var(</code> dans une valeur de propriété et ensuite rentrer un tiret (<code>-</code>), fera apparaitre toutes les variables déclarées dans le CSS dans une liste d'autocomplétion.<br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/15813/css-variable-autocomplete.png" style="display: block; margin: 0 auto;"></p> +</div> + +<p>Attention, tous les changements effectués sont temporaires : recharger la page restaure le style original.</p> + +<p>Il est possible d'utiliser les <kbd>flèches haut/bas</kbd> et les touches page haut/bas pour augmenter/diminuer les valeurs numériques lorsqu'on modifie une règle :</p> + +<ul> + <li>La <kbd>flèche haut</kbd> augmentera les valeurs de 1. "1px" changera en "2px", par exemple.</li> + <li><kbd>Maj</kbd> + flèche haut/bas modifiera de 10.</li> + <li><kbd>Alt</kbd> + <kbd>flèche haut/bas</kbd> modifie de 0.1. Il est a noter que depuis Firefox 60, cette combinaison a été remplacée par <kbd>Ctrl</kbd> + <kbd>Haut</kbd>/<kbd>Bas</kbd> sur Linux et Windows pour éviter les conflits avec les raccourcis par défaut de ces systèmes d'exploitation (voir {{bug("1413314")}}). Le raccourci est resté le même sous Mac OS - — <kbd>Ctrl</kbd> + <kbd>Haut</kbd> sous Mac OS est le raccourci par défaut pour ouvrir Mission Control.</li> + <li><kbd>Maj</kbd> + <kbd>Page haut/bas</kbd> modifie de 100.</li> +</ul> + +<p>Les modifications apportées dans l'onglet des règles sont visibles dans <a href="/fr/docs/Tools/Style_Editor">l'Éditeur de Style</a>, et vice versa.</p> + +<p>A partir de Firefox 52, lors de l'édition de CSS, le menu contextuel est celui par défaut pour la modification de texte :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h2 id="Ajouter_de_nouvelles_règles">Ajouter de nouvelles règles</h2> + +<p>Pour ajouter de nouvelles règles, il suffit de faire un clic droit pour afficher le menu contextuel puis de sélectionner « Ajouter une règle ». Cela ajoutera une règle qui correspond au nœud du document qui est sélectionné.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Il existe également un bouton pour faire la même chose :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h2 id="Copie_une_règle">Copie une règle</h2> + +<p>Pour copier une règle, il faut utiliser une des options suivantes du menu contextuel (clic droit) :</p> + +<ul> + <li>Copier la règle</li> + <li>Copier le sélecteur</li> + <li>Copier la déclaration de la propriété</li> + <li>Copier le nom de la propriété</li> + <li>Copier la valeur de la propriété</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La liste complète des <a href="/fr/docs/Tools/Page_Inspector/Keyboard_shortcuts">raccourcis clavier</a> de l'Inspecteur.</li> + <li>L'inspecteur inclut également divers outils pour travailler avec des fonctionnalités CSS spécifiques telles que les couleurs, les polices et les animations. Pour en apprendre plus sur ces fonctionnalités, voir les <a href="/fr/docs/Outils/Inspecteur">guides pratiques</a>.</li> +</ul> diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..d71e356662 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html @@ -0,0 +1,326 @@ +--- +title: Éxaminer et modifier le code HTML +slug: Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML +tags: + - Guide + - Inspector + - Outils + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible d’examiner et d'éditer le code HTML d'une page grâce au <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTML</a>.</p> + +<h2 id="Naviguer_dans_le_HTML">Naviguer dans le HTML</h2> + +<h3 id="Fil_d'Ariane_HTML">Fil d'Ariane HTML</h3> + +<p>En bas du panneau HTML, se trouve un <a href="https://fr.wikipedia.org/wiki/Fil_d%27Ariane_%28ergonomie%29">fil d'Ariane</a>. Ce fil affiche l'a hiérarchie complète de l'élément sélectionné dans la page :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15499/57-html-panel.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 633px;"></p> + +<p>Survoler un élément du fil mettra celui-ci en surbrillance dans la page.</p> + +<p>Le fil possède ses propres <a href="/fr/docs/Tools/Page_Inspector/Keyboard_shortcuts#Breadcrumbs_bar">raccourcis clavier</a>.</p> + +<div class="note"> +<p>Il est à noter que dans les versions antérieures à Firefox 48, le fil d'Ariane se trouvait en haut du panneau et non en bas.</p> +</div> + +<h3 id="Recherche">Recherche</h3> + +<p>À partir de Firefox 45, la boite de recherche de l'Inspecteur trouve les correspondances dans tout le markup du document ouvert, ainsi que dans toutes les frames.</p> + +<p>Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier <kbd>Ctrl</kbd> + <kbd>F</kbd> , ou <kbd>Cmd</kbd> + <kbd>F</kbd> sous Mac.</p> + +<p>Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID qui correspondent à la recherche en cours :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15495/html-code-search.png" style="display: block; height: 398px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Pour itérer parmi les suggestions, il faut utiliser <kbd>Flèche Haut</kbd> et <kbd>Flèche Bas</kbd>. <kbd>Tab</kbd> permet de choisir la suggestion sélectionnée. <kbd>Entrée</kbd> permet alors de sélectionner le premier noeud correspondant.</p> + +<p>Si la recherche est faite sans utiliser de valeur d'autocomplétion, alors la recherche sera effectuée sur tout le texte du document, incluant les balises, les attributs, et le contenu textuel des noeuds.</p> + +<p>{{EmbedYouTube("AKBhnfp1Opo")}}</p> + +<p>Pour parcourir les résultats, il faut utiliser <kbd>Enter</kbd> . Depuis Firefox 48, il est possible d'itérer à l'envers avec <kbd>Maj</kbd> + <kbd>Enter</kbd> .</p> + +<h3 id="Arbre_HTML">Arbre HTML</h3> + +<p>Le reste du panneau affiche le HTML de la page sous forme d'arbre (cette interface est également appelée Markup View). À la gauche de chaque nœud se trouve une flèche, cliquer sur celle-ci développera le nœud. appuyer sur la touche "Alt" développera tous les nœuds inclus dans l'élément.</p> + +<p><img alt="The new Firefox 57 inspector HTML tree." src="https://mdn.mozillademos.org/files/15503/57-html-tree.png" style="display: block; height: 433px; margin-left: auto; margin-right: auto; width: 600px;">Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.</p> + +<p>Les nœuds qui ne sont pas visibles (par exemple avec <a href="/fr/docs/Web/CSS/display">display:none)</a> sont affichés en transparence dans l'arbre.</p> + +<p>Depuis Firefox 53, une ellipse est affichée entre la balise ouvrante et fermante d'un élément réduit à cause d'un contenu trop long.</p> + +<p>Avant Firefox 53, il était impossible de déterminer si noeud réduit avait des enfants. Maintenant, ce cas est indiqué par une icône de points de suspension ( <img alt="" src="https://mdn.mozillademos.org/files/14925/child-node-indicator.png" style="height: 24px; width: 32px;"> )</p> + +<div class="note"> +<p><strong>Note</strong>: Il existe des raccourcis clavier fort pratiques qui peuvent être utilisés dans l'arbre HTML : voir la <a href="/fr/docs/Tools/Keyboard_shortcuts#HTML_pane">liste des raccourcis clavier</a>.</p> +</div> + +<h3 id="before_et_after">::before et ::after</h3> + +<p>Depuis Firefox 35, il est possible d'inspecter les pseudo éléments ajoutés en utilisant {{cssxref("::before")}} <code>et</code> {{cssxref("::after")}} :</p> + +<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p> + +<h3 id="Noeuds_ne_contenant_que_des_espaces">Noeuds ne contenant que des espaces</h3> + +<div class="geckoVersionNote">Nouveauté de Firefox 52</div> + +<p>Les développeurs web n'écrivent (généralement) pas tout leur code en une seule ligne. Ils utilisent des espaces, des retours à la ligne, ou des tabulations dans leur HTML pour le rendre plus lisible.</p> + +<p>Normalement, ces espaces n'ont aucun effet sur le visuel de la page. Mais en réalité, lorsqu'un navigateur analyse l'HTML, il génère automatiquement des noeuds de texte anonymes pour les éléments qui ne sont pas contenus dans des balises. Cela inclut les espaces (qui après tout, sont un type de texte).</p> + +<p>Si ces noeuds autogénérés sont des éléments <a href="/fr/docs/Web/Guide/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">"en ligne" (inline level)</a>, alors les navigateurs leur donneront une hauteur et largeur non nulle. Des espaces étranges entre les éléments apparaitront alors, même si aucun margin ou padding n'est appliqué sur ces éléments.</p> + +<p>Depuis Firefox 52, l'Inspecteur affiche ces noeuds d'espaces, afin de pouvoir savoir d'où viennent les espaces dans la mise en page. Ces noeuds sont représentés par un point: <img alt="" src="https://mdn.mozillademos.org/files/14931/new-whitespace-text-indicator.png" style="height: 23px; width: 30px;"> et affichent une infobulle explicative au survol :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14929/whitespace-text-nodes-2.png" style="display: block; height: 1010px; margin-left: auto; margin-right: auto; width: 912px;"></p> + +<p>Il est possible de trouver une démonstration de ceci à l'adresse : <a href="https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html">https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html</a>.</p> + +<h3 id="Shadow_roots">Shadow roots</h3> + +<p>Tous les noeuds <em>shadow roots</em> présents dans le DOM sont exposés par la page HTML, de la même manière que le DOM normal. Le <em>shadow root</em> est représenté par un noeud nommé <code>#shadow-root</code> — il est possible de cliquer sur la flèche d'expansion pour voir le contenu complet du <em>shadow DOM</em>, et le manipuler, exactement comme avec les noeuds DOM normaux. Il existe cependant des limites, il n'est par exemple pas possible de glisser/déposer ou de supprimer des noeuds <em>shadow DOM</em>.</p> + +<p><img alt="A view of a shadow root shown inside the DOM tree in the Firefox DevTools" src="https://mdn.mozillademos.org/files/16051/shadow-root-in-html-pane.png" style="height: 485px; width: 1303px;"></p> + +<p>Si un <em>shadow DOM</em> contient un élément avec attribut <code>slot</code> ayant été inspiré dans un élément {{htmlelement("slot")}} — voir <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots#Adding_flexibility_with_slots">Flexibilitée ajoutée par les slots</a> pour une explication de l'utilisation de ceux-ci --- cet élément sera affiché à l'intérieur de son élément {{htmlelement("slot")}} correspondant, avec un lien à côté. Cliquer sur ce lien affichera l'élément avec l'attibut <code>slot</code> tel qu'il existe en dehors du <em>shadow DOM</em></p> + +<p><img alt="A view of a shadow root shown inside the DOM tree in the Firefox DevTools" src="https://mdn.mozillademos.org/files/16063/slots.png" style="height: 208px; width: 672px;"></p> + +<p>Cette fonctionnalité est utile pour trouver la source du contenu d'un élément <code><slot></code></p> + +<div class="note"> +<p><strong>Note</strong>: L'inspection du <em>Shadow DOM</em> à été implémenté dans Firefox 61, mais est actuellement caché par la préférence <code>dom.webcomponents.shadowdom.enabled</code>. Elle sera activée par défaut lorsque les <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web components/Shadow DOM</a> seront disponible dans la plateforme, l'estimation actuelle pour cela est Firefox 63.</p> +</div> + +<h2 id="Menu_contextuel">Menu contextuel</h2> + +<p>Il est possible d’effectuer des tâches courantes sur un élément spécifique grâce au menu contextuel. Pour ouvrir celui-ci, il suffit de faire un clic droit sur l'élément :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9759/inspector-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 456px;"></p> + +<h3 id="Référence_du_menu_contextuel">Référence du menu contextuel</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Modifier comme HTML</td> + <td><a href="#Editing_HTML">Modifie le code HTML de l'élément</a>.</td> + </tr> + <tr> + <td>Copier >> l’intérieur du HTML</td> + <td>Copie le contenu interne à l'élément HTML</td> + </tr> + <tr> + <td>Copier >> l’extérieur du HTML</td> + <td>Copie le contenu HTML à l'intérieur par rapport à l'élément courant en incluant la balise de l'élément courant</td> + </tr> + <tr> + <td>Copier >> le sélecteur CSS</td> + <td>Copie un sélecteur CSS qui sélectionne uniquement l'élément.</td> + </tr> + <tr> + <td>Copier >> le chemin CSS</td> + <td>Copie un sélecteur CSS qui représente le chemin complet vers l'élément</td> + </tr> + <tr> + <td> + <p>Copier >> le Data-URL de l'image</p> + </td> + <td>Copie l'image en tant que data:// URL, si l'élément sélectionné est une image.</td> + </tr> + <tr> + <td>Afficher les propriétés DOM</td> + <td> + <p>Ouvre la <a href="/fr/docs/Tools/Web_Console#The_split_console">console scindée</a> et entre la commande "<code>inspect($0)</code>" pour <a href="/fr/docs/Tools/Web_Console#Inspecting_objects">inspecter</a> l'élément actuellement sélectionné.</p> + </td> + </tr> + <tr> + <td>Utiliser dans la console</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 43</p> + </div> + + <p>Assigne le noeud actuellement sélectionné dans une variable nommée <code>temp0</code> (ou <code>temp1</code> si <code>temp0</code> est déjà utilisée, etc.), puis ouvre la <a href="/fr/docs/Tools/Web_Console#The_split_console">console scindée</a>, vous permettant d'interagir avec ce noeud depuis la ligne de commande.</p> + </td> + </tr> + <tr> + <td>Tout étendre</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + Étend l'élément sélectionné ainsi que tous ses enfants dans l'arbre HTML. C'est l'équivalent d'utiliser la touche <kbd>Alt</kbd> et le bouton pour étendre un élément (le triangle en début de ligne)</td> + </tr> + <tr> + <td>Réduire</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + Réduit l'élément sélectionné. C'est l'équivalent du bouton en forme de triangle en début de ligne.</td> + </tr> + <tr> + <td>Coller >> à l’intérieur du HTML</td> + <td> + <p>Colle le contenu du presse-papier dans le nœud en tant qu'<a href="/fr/docs/Web/API/element.innerHTML">innerHTML</a>.</p> + </td> + </tr> + <tr> + <td>Coller >> à l’extérieur du HTML</td> + <td>Colle le contenu du presse-papier dans le nœud en tant qu'<a href="/fr/docs/Web/API/element.outerHTML">outerHTML</a>.</td> + </tr> + <tr> + <td>Coller >> Avant</td> + <td>Colle le contenu du presse-papier dans le document immédiatement avant le nœud sélectionné.</td> + </tr> + <tr> + <td>Coller >> Après</td> + <td>Colle le contenu du presse-papier dans le document immédiatement après le nœud sélectionné.</td> + </tr> + <tr> + <td>Coller >> Comme premier nœud enfant</td> + <td>Colle le contenu du presse-papier dans le document en tant que premier enfant du nœud sélectionné.</td> + </tr> + <tr> + <td>Coller >> Comme dernier nœud enfant</td> + <td>Colle le contenu du presse-papier dans le document en tant que dernier enfant du nœud sélectionné.</td> + </tr> + <tr> + <td>Faire défiler la vue jusqu'au noeud</td> + <td> + <p>Fait défiler la page jusqu'a ce que le noeud sélectionné soit visible.</p> + + <p>À partir de Firefox 44, il est possible d'utiliser le raccourci clavier <kbd>S</kbd> fera la même action.</p> + </td> + </tr> + <tr> + <td>Prendre une capture du noeud</td> + <td>Prend une capture du noeud sélectionné. La capture est directement sauvegardée dans votre dossier de téléchargement. Voir <a href="/fr/docs/Tools/Taking_screenshots">Prendre des captures</a>.</td> + </tr> + <tr> + <td>Créer un nouveau noeud</td> + <td>Crée une balise <div> en dernier enfant de l'élément sélectionné. Voir <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_%C3%A9diter_le_code_HTML$edit#Inserting_new_nodes">Insérer des nouveaux noeuds</a>.</td> + </tr> + <tr> + <td>Dupliquer le noeud</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + Crée une copie de l'élément sélectionné, et l'insère immédiatement après.</td> + </tr> + <tr> + <td>Supprimer le nœud</td> + <td>Supprime l'élément</td> + </tr> + <tr> + <td>Attributs >> Ajouter un attribut</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + Ajoute un attribut à l'élément.</td> + </tr> + <tr> + <td>Attributs >> Modifier l'attribut</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + (seulement quand un attribut est sélectionné) Modifie l'attribut.</td> + </tr> + <tr> + <td>Attributs >> Supprimer l'attribut</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + (seulement quand un attribut est sélectionné) Supprime l'attribut.</td> + </tr> + <tr> + <td>Attributs >> Copier la valeur de l'attribut</td> + <td>Copie la valeur de l'attribut</td> + </tr> + <tr> + <td>Ouvrir le lien dans un nouvel onglet</td> + <td>(seulement quand un lien - comme un attribut href - est sélectionné) Ouvre l'élément dans un nouvel onglet.</td> + </tr> + <tr> + <td>Ouvrir dans le Débogueur</td> + <td>(seulement quand un lien vers une source JS est sélectionné) Ouvre la source dans le Débogueur.</td> + </tr> + <tr> + <td>Ouvrir fichier dans l'éditeur de style</td> + <td>(seulement quand un lien vers une source CSS est sélectionné) Ouvre la source dan l'éditeur de style.</td> + </tr> + <tr> + <td>Copier l'adresse du lien</td> + <td>(seulement quand une URL est sélectionnée) Copie l'URL</td> + </tr> + <tr> + <td>:hover</td> + <td>Définit la pseudo classe CSS <a href="/fr/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a></td> + </tr> + <tr> + <td>:active</td> + <td>Définit la pseudo classe CSS <a href="/fr/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a></td> + </tr> + <tr> + <td>:focus</td> + <td>Définit la pseudo classe CSS <a href="/fr/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a></td> + </tr> + </tbody> +</table> + +<h2 id="Éditer_le_code_HTML"><a name="Editing_HTML">Éditer le code HTML</a></h2> + +<p>Il est possible d'éditer les éléments HTML directement dans le panneau HTML. Il suffit de double cliquer sur le texte voulu, de le modifier puis d'appuyer sur Entrée. Les modifications sont immédiatement effectives.</p> + +<p>Pour éditer le <a href="/fr/docs/Web/API/Element.outerHTML">outerHTML</a>, il faut ouvrir le menu contextuel et sélectionner "Modifier comme HTML" . Une boite apparaîtra alors dans le panneau HTML :</p> + +<p><img alt="Edit HTML directly in the Inspector panel in Firefox 57" src="https://mdn.mozillademos.org/files/15505/57-edit-as-html.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 600px;">N'importe quel fragment HTML peut être ajouté ici. Il est par exemple possible de changer les balises de l’élément, d'ajouter de nouvelles balises, de modifier des éléments existants, etc. Les modifications sont effectives dès que vous cliquez en-dehors de la boite</p> + +<p>À partir de Firefox 52, lors de l'édition, le menu contextuel est le même que pour le texte modifiable normal :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h3 id="Copier_coller">Copier coller</h3> + +<p>Il est possible d'utiliser le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menu popup</a> pour copier des noeuds dans l'arbre HTML.</p> + +<h3 id="Glisser_déposer">Glisser déposer</h3> + +<p>Il est possible de modifier l'HTML en déplaçant les noeuds dans l'arbre HTML. Il suffit de rester cliqué sur un élément et de le glisser vers le haut ou vers le bas. Lorsque le clic est relâché, l'élément sera inséré à la position voulue.</p> + +<p>{{EmbedYouTube("oI-a035nfWk")}}</p> + +<p>À partir de Firefox 44, il est possible d'annuler le glisser-déposer en utilisant la touche <kbd>Esc</kbd>.</p> + +<h3 id="Insérer_de_nouveaux_noeuds">Insérer de nouveaux noeuds</h3> + +<div class="geckoVersionNote">Nouveau dans Firefox 48</div> + +<p>À partir de Firefox 48, il y a une icône "+" en haut du panneau :</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13082/inspector-insert-node.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 547px;"></p> + +<p> </p> + +<p>Cliquer sur cette icône insère une balise <code><a href="/fr/docs/Web/HTML/Element/div"><div></a></code> dans le document en tant que dernier enfant de l'élément sélectionné. Il est alors possible de modifier le contenu et le style du noeud, exactement comme n'importe quel autre élément.</p> + +<p>{{EmbedYouTube("NG5daffvVZM")}}</p> + +<p>L'option "Créer un nouveau noeud" dans le menu contextuel fait la même chose.</p> + +<p>Il est à noter que le bouton est désactivé si l'élément sélection est tel qu'ajouter un dernier enfant n'aurait aucun effet (par exemple un <code><a href="/fr/docs/Web/HTML/Element/html"><html></a></code> ou un <code><a href="/fr/docs/Web/HTML/Element/iframe"><iframe></a></code>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <code><div></code>, ( <code><a href="/fr/docs/Web/HTML/Element/style"><style></a></code> ou <code><a href="/fr/docs/Web/HTML/Element/link"><link></a></code> par exemple). Dans ces cas, l'élément ajouté est un texte.</p> diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..1c890f872b --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -0,0 +1,37 @@ +--- +title: Examiner et modifier le modèle de boîte +slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_modèle_de_boîte +tags: + - Guide + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +<div>{{ToolsSidebar}}</div><h2 id="Examiner_le_modèle_de_boîte">Examiner le modèle de boîte</h2> + +<p>En ayant le bouton de <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">Sélection d'éléments</a> activé, survoler un élément de la page aura pour effet d'afficher son <a href="/fr/docs/Web/CSS/box_model">modèle de boite </a>en surbrillance :</p> + +<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p> + +<p>Survoler le noeud d'un élément dans le panneau HTML l'affichera également :</p> + +<p>{{EmbedYouTube("xA4IxTttNLk")}}</p> + +<h3 id="La_vue_modèle_de_boite">La vue "modèle de boite"</h3> + +<p>Lorsqu'un élément est sélectionné, il est possible d'avoir un aperçu détaillé du modèle de boite dans la <a href="/fr/Tools/Page_Inspector/UI_Tour#Computed_view">vue modèle de boite </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>Survoler une valeur affichera une infobulle indiquant d'où la valeur est issue :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p> + +<p>Survoler une partie du modèle de boite dans cette vue affiche la partie correspondante de l'élément dans la page :</p> + +<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p> + +<h2 id="Éditer_le_modèle_de_boites">Éditer le modèle de boites</h2> + +<p>Il est également possible d'éditer les valeurs dans la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Computed_view">vue modèle de boite</a> et les changements dans la page sont affiché immédiatement :</p> + +<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p> diff --git a/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..192e82ef37 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -0,0 +1,37 @@ +--- +title: Examiner les écouteurs d'évènements +slug: Outils/Inspecteur/Comment/Examiner_les_écouteurs_d_évènements +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +<div>{{ToolsSidebar}}</div> + +<p>L'inspecteur affiche dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTML</a> le mot "event" à côté des éléments qui ont un écouteur lié :</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16253/inspect_element_with_eventhandler.png" style="border: 1px solid black; display: block; height: 24px; margin-left: auto; margin-right: auto; width: 491px;"></p> + +<p> </p> + +<p>Cliquer sur cette icône fera apparaitre une pop-up listant tous les écouteurs liés à cet élément :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16254/inspector_event_handlers.png" style="border: 1px solid black; display: block; height: 702px; margin-left: auto; margin-right: auto; width: 828px;">Chaque ligne contient :</p> + +<ul> + <li>Une flèche droite. Cliquer dessus étend la ligne et affiche le code source de la fonction de l'écouteur.</li> + <li>Le nom de l'évènement.</li> + <li>Le nom du fichier et le numéro de ligne où se trouve l'écouteur : cliquer fera apparaitre la fonction de l'écouteur dans la pop-up.</li> + <li>Une flèche courbée. Cliquer dessus affiche le code de l'handler dans le Débogueur</li> + <li>Une indication pour savoir si l'évènement se propage ("bubbles") ou non.</li> + <li>Une indication qui affiche le système qui définit l'évènement. Firefox peut afficher : + <ul> + <li>Les évènements DOM standards</li> + <li><a class="external external-icon" href="http://api.jquery.com/category/events/">Les évènements jQuerry</a></li> + <li><a href="https://facebook.github.io/react/docs/events.html">Les évènements React</a></li> + </ul> + </li> +</ul> diff --git a/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..b653021231 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,125 @@ +--- +title: "Inspecteur de grille CSS\_: examiner les grilles" +slug: Outils/Inspecteur/Comment/Examine_grid_layouts +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary"><strong>L'inspecteur de grilles</strong> permet de trouver, d'examiner, et de modifier les <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">grilles CSS</a> en utilisant les outils de développement de Firefox</p> + +<div class="note"> +<p><strong>Note</strong>: Les exemples montrés dans les captures d'écran ci-dessous sont tirés de <a href="http://labs.jensimmons.com/2016/examples/futurismo-1.html">Futurismo</a> (Jen Simmons), des expériences "<a href="http://labs.jensimmons.com/2017/01-003.html">Variations on a grid"</a>, et de "<a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Naming_a_grid_area">live named grid area example</a>" (Rachel Andrew).</p> +</div> + +<h2 id="Découvrir_les_grilles_CSS">Découvrir les grilles CSS</h2> + +<p>Lorsqu'un élément HTML d'une page possède l'attribut <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code>, des fonctionnalités des outils de développement sont activées pour fournir un accès simple aux fonctionnalités des grilles.</p> + +<h3 id="Dans_le_panneau_HTML">Dans le panneau HTML</h3> + +<p><img alt="Le panneau HTML, montrant un marqueur de grille" src="https://mdn.mozillademos.org/files/15977/html-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 400px;"></p> + +<h3 id="Dans_le_panneau_CSS">Dans le panneau CSS</h3> + +<p>Dans l'onglet règles du <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>, toutes les instances d'une déclaration <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code> possèdent une icône de grille (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) :</p> + +<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/15978/css-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 399px; margin: 0px auto; width: 1146px;"></p> + +<p>Cliquer sur cette icône affiche une grille en superposition sur la page, afin de mettre en évidence la position des lignes et "<em>tracks</em>" de la grille CSS :</p> + +<p><img alt="Une superposition en couleur de la grille CSS" src="https://mdn.mozillademos.org/files/15979/grid-overlay.png" style="border-style: solid; border-width: 1px; display: block; height: 1383px; margin: 0px auto; width: 1842px;"></p> + +<p>La superposition reste affichée même lorsque d'autres éléments sont sélectionnés, il est donc possible d'éditer les propriétés CSS appropriées et en voir les effets sur la grille.</p> + +<h3 id="La_section_grilles_de_longlet_mise_en_page">La section "grilles" de l'onglet mise en page</h3> + +<p>Lorsque des grilles sont incluses dans une page, l'onglet "Mise en page" du panneau CSS inclut une section "Grille", qui contient quelques options pour afficher celles-cis.</p> + +<div class="note"> +<p><strong>Note</strong>: La vue "Mise en page" se situe dans le panneau de droite de l'Inspecteur. Les captures d'écran au-dessus et en dessous devraient aider à sa localisation.</p> +</div> + +<h2 id="Options_de_grilles">Options de grilles</h2> + +<p>La section grille de l'onglet mise en page ressemble à ceci :<img alt="Les options des grilles CSS" src="https://mdn.mozillademos.org/files/15980/grid-options.png" style="border-style: solid; border-width: 1px; display: block; height: 408px; margin: 0px auto; width: 500px;"></p> + +<p>Ces options sont :</p> + +<ul> + <li>Superposer une grille : contient une case à cocher pour chaque grille CSS présente sur la page,ainsi que quelques options . Cela permet de superposer une grille d'indication sur les grilles CSS.</li> + <li>Paramètres d'affichage des grilles : + <ul> + <li>Afficher le numéro des lignes : affiche le nombre de lignes pour chaque grille d'indication (option activée par défaut).</li> + <li>Afficher le nom des zones : active/désactive les noms des zones si la grille possède des noms de zones (activé par défaut quand utile).</li> + <li>Prolonger les lignes à l'infini : Par défaut, les lignes/<em>tracks</em> des grilles CSS ne sont affichées que dans l'élément sur lequel <code>display: grid</code> est attaché. Lorsque cette option est activée, les lignes de la grille d'indication se prolongent jusqu'au bord de la fenêtre sur chaque axe.</li> + </ul> + </li> + <li>Mini vue de grilles : Une vue réduite des grilles actuellement superposées.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Les préférences de grilles telles que la couleur de superposition et les paramètres d'affichage persistent au rechargement des pages (chacun sur sa page séparée).</p> +</div> + +<h3 id="Grille_de_superposition">Grille de superposition</h3> + +<p>Chaque grille présente sur la page, possède son entrée dans la section "superposer une grille" :</p> + +<p><img alt="Une entrée pour une seule grille de superposition affichant son nom, sa couleur, et plus" src="https://mdn.mozillademos.org/files/15981/overlay-grid-entry.png" style="border-style: solid; border-width: 1px; display: block; height: 37px; margin: 0px auto; width: 300px;"></p> + +<p>Chaque entrée est composée de (de gauche à droite) :</p> + +<ul> + <li>Une case à cocher permettant d'activer/désactiver la superposition pour cette grille. Il est à noter qu'actuellement, une seule superposition à la fois est possible.</li> + <li>Un nom pour identifier la grille, il s'agit du sélecteur identifiant l'élément HTML auquel la grille est appliquée. Cliquer sur le nom active/désactive également la superposition.</li> + <li>Une icône de ciblage, qui sélectionne automatiquement dans l'Inspecteur l'élément HTML auquel la grille est rattachée.</li> + <li>Un sélecteur de couleur permettant de change la couleur de la superposition. C'est utile pour pouvoir facilement différencier la grille de sa superposition.</li> +</ul> + +<h3 id="Afficher_le_numéro_des_lignes">Afficher le numéro des lignes</h3> + +<p>Par défaut le numéro des lignes est affiché dans la superposition :</p> + +<p><img alt="Une superposition de grille CSS avec les numéros de lignes affichés" src="https://mdn.mozillademos.org/files/15982/line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 582px; margin: 0px auto; width: 600px;"></p> + +<p>Décocher la case "Afficher les numéros des lignes" les désactivent :</p> + +<p><img alt="A CSS grid overlay with grid line numbers not displayed" src="https://mdn.mozillademos.org/files/15983/no-line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Afficher_le_nom_des_zones">Afficher le nom des zones</h3> + +<p>Si une grille possède des noms de zones, ces noms seront automatiquement affichés par défaut dans la superposition :</p> + +<p><img alt="A CSS grid overlay with named area names displayed" src="https://mdn.mozillademos.org/files/15984/grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 777px; margin: 0px auto; width: 1396px;"></p> + +<p>Décocher la case désactive cet affichage :</p> + +<p><img alt="A CSS grid overlay with named area names not displayed" src="https://mdn.mozillademos.org/files/15990/no-grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 788px; margin: 0px auto; width: 1400px;"></p> + +<h3 id="Prolonger_les_lignes_à_linfini">Prolonger les lignes à l'infini</h3> + +<p>Par défaut les lignes/<em>tracks </em>ne sont affichées que dans l'élément sur laquelle la grille est appliquée :</p> + +<p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p> + +<p>Lorsque cette option est activée, les lignes se prolongent sur chaque axe jusqu'au bord de la fenêtre :</p> + +<p><img alt="A CSS grid overlay with grid lines extended infinitely" src="https://mdn.mozillademos.org/files/15986/extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 501px; margin: 0px auto; width: 1000px;"></p> + +<h3 id="Mini_vue_de_la_grille">Mini vue de la grille</h3> + +<p>Affiche une version miniature de la superposition de la grile, en proportions correctes de la vraie.</p> + +<p><img alt="A mini CSS grid view from the Firefox DevTools" src="https://mdn.mozillademos.org/files/15988/mini-grid-view.png" style="border-style: solid; border-width: 1px; display: block; height: 246px; margin: 0px auto; width: 600px;"></p> + +<p>Survoler les différentes zones de la mini grille, affichera en surbrillance la zone correspondante dans la vraie grille et fournira une infobulle avec des informations telles que la taille de la zone, sa ligne et sa colonne.</p> + +<p><img alt="A Firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page." src="https://mdn.mozillademos.org/files/15989/mini-grid-highlight.png" style="border-style: solid; border-width: 1px; display: block; height: 793px; margin: 0px auto; width: 1200px;"></p> + +<h2 id="À_voir_également">À voir également</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> — Plein d'exemples intéressants de l'utilisation des grilles.</li> + <li><a href="https://gridbyexample.com/">Grid by Example</a> — L'apprentissage des grilles CSS par Rachel Andrew.</li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> — La référence et les tutoriaux MDN sur les grilles CSS.</li> +</ul> diff --git a/files/fr/tools/page_inspector/how_to/index.html b/files/fr/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..3d3e1418dc --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/index.html @@ -0,0 +1,10 @@ +--- +title: Comment faire… +slug: Outils/Inspecteur/Comment +translation_of: Tools/Page_Inspector/How_to +--- +<div>{{ToolsSidebar}}</div> + +<p><span class="seoSummary">Cette page présente différents "Comment faire ?" pour l'Inspecteur, décrivant des techniques avancées.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..93e353dff0 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -0,0 +1,22 @@ +--- +title: Inspecter et sélectionner des couleurs +slug: Outils/Inspecteur/Comment/Inspecter_et_sélectionner_des_couleurs +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +<div>{{ToolsSidebar}}</div><p>Dans l'onglet "<a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Règles" </a>du panneau CSS, si une règle contient une valeur de couleur, un aperçu de cette couleur sera affiché à côté de la valeur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<p>Cliquer sur cet aperçu ouvre un sélecteur de couleur, permettant de changer la couleur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p> + +<p>Le sélecteur de couleur inclut une icône en forme de pipette. Cliquer sur cette icône permet de sélectionner une nouvelle couleur depuis la page :</p> + +<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<p>À partir de Firefox 40, cliquer sur l'aperçu tout en maintenant la touche <kbd>Maj</kbd> enfoncée change le format de couleur :</p> + +<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p> + +<p>Depuis sa version 53, Firefox supporte les <a href="https://drafts.csswg.org/css-color/">valeurs de couleurs CSS "level 4"</a>.</p> diff --git a/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html b/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..6e8f25c1b1 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,35 @@ +--- +title: Ouvrir l'inspecteur +slug: Outils/Inspecteur/Comment/Ouvrir_l_Inspecteur +tags: + - Guide + - Inspecteur + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>Il y a deux façons principales d’ouvrir l'inspecteur :</p> + +<ul> + <li><strong>Sans élément sélectionné </strong>: cliquer sur l'option "Inspecteur" du menu "Développement", ou bien utiliser le <a href="/fr/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">raccourci clavier</a> correspondant (Ctrl + Maj + C)</li> + <li><strong>Avec un élément sélectionné </strong>: faire un clic droit sur un élément et sélectionner "Examiner l'élément"</li> +</ul> + +<p>L'inspecteur s’ouvrira alors dans votre navigateur :</p> + +<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16386/pageInspector.png" style="display: block; height: 691px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Il est également possible de le faire apparaitre à gauche :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16390/inspector_leftSide.png" style="height: 691px; width: 800px;"></p> + +<p>Ou à droite :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16391/inspector_rightSide.png" style="height: 691px; width: 800px;"></p> + +<p>Ou dans une fenêtre séparée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16392/inspector_sideXside.png" style="height: 361px; width: 800px;"></p> + +<p>La <a class="new" href="https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/UI_Tour">visite guidée de l'interface utilisateur</a> peut vous aider à vous repérer dans l'inspecteur.</p> diff --git a/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html b/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html new file mode 100644 index 0000000000..1d640ebf74 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html @@ -0,0 +1,22 @@ +--- +title: Repositionner des éléments dans la page +slug: Outils/Inspecteur/Comment/Reposition_elements_in_the_page +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">Nouveau dans Firefox 48</div> + +<p>A partir de Firefox 48; il est possible de déplacer les élément positionnés en absolu en les glissant dans la page.</p> + +<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p> + +<p>Si un élément a sa propriété <code>{{cssxref("position")}}</code> mise à <code>absolute</code>, <code>relative</code> ou <code>fixed</code> et une ou plus des propriétés {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} ou {{cssxref("right")}}, alors la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">vue "Modèle de boîte"</a> affiche un bouton :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>Cliquer sur ce bouton fera apparaitre deux poignées à coté de l'élément :</p> + +<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p> + +<p>Il est alors possible d'utiliser ces poignées pour déplacer l’élément dans la page.</p> + +<p>Si l’élément est positionné en absolu, des lignes pointillées apparaissent pour représenter le décalage par rapport au parent. Pour les éléments positionnés en relatif, elles représentent la position d'origine du nœud. les distances sont affichés par des infobulles pour chaque coté.</p> diff --git a/files/fr/tools/page_inspector/how_to/select_an_element/index.html b/files/fr/tools/page_inspector/how_to/select_an_element/index.html new file mode 100644 index 0000000000..084b33f3be --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/select_an_element/index.html @@ -0,0 +1,36 @@ +--- +title: Sélectionner un élément +slug: Outils/Inspecteur/Comment/Sélectionner_un_élément +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +<div>{{ToolsSidebar}}</div><p><em>L'élément sélectionné</em> est l'élément de la page sélectionné dans l'Inspecteur. Il est affiché dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTML</a> et son CSS est affiché dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>.</p> + +<p><em>L'élément en surbrillance </em>est l'élément de la page sur lequel est superposé une image affichant son modèle de boite, ainsi qu'une une infobulle avec son type et sa taille :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="Avec_le_menu_contextuel">Avec le menu contextuel</h2> + +<p>Pour ouvrir l'Inspecteur et sélectionner immédiatement un élément, il suffit d'ouvrir le menu contextuel sur cet élément (clic droit) puis de sélectionner "Inspecter l'élément" :</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="Avec_le_panneau_HTML">Avec le panneau HTML</h2> + +<p>Lorsque l'inspecteur est ouvert, l'élément survolé par la souris est mis en évidence dans la page. Cliquer sur cet élément le sélectionnera :</p> + +<p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre HTML.</p> + +<h2 id="Avec_le_sélectionneur_de_noeuds">Avec le sélectionneur de noeuds</h2> + +<p>Pour sélectionner un élément dans la page, il est possible d'activer le sélectionneur en cliquant sur son icône ( <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> ) en haut à gauche. Dès lors, chaque élément survolé par la souris sera mis en évidence et cliquer sur un élément le sélectionnera :</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> + +<p>Depuis Firefox 52, utiliser la touche <kbd>Maj</kbd> lors du clic sélectionnera l'élément, mais ne fermera pas le sélectioneur (afin de pouvoir sélectionner un autre élément ensuite)</p> diff --git a/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html b/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html new file mode 100644 index 0000000000..b04d2d6e1f --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html @@ -0,0 +1,30 @@ +--- +title: Sélectionner et mettre en surbrillance +slug: Outils/Inspecteur/Comment/Select_and_highlight_elements +translation_of: Tools/Page_Inspector/How_to/Select_and_highlight_elements +--- +<div>{{ToolsSidebar}}</div><p>L'élément <em>sélectionné</em> est élément de la page ciblé par l'Inspecteur. Cet élément est affiché dans le<a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane"> panneau HTML</a> et son CSS est affiché dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>.</p> + +<p>L'élément en <em>surbrillance </em>est l'élément dans la page en surbrillance avec son modèle de boit d'affiché, ainsi qu'une infobulle avec son tag et sa taille :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="Via_le_menu_contextuel">Via le menu contextuel</h2> + +<p>Pour ouvrir l'Inspecteur et sélectionner un élément immédiatement, il suffit d'activer le menu contextuel de n'importe quel élément de la page et de sélectionner "Inspecter l'élément" :</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="Via_le_panneau_HTML">Via le panneau HTML</h2> + +<p>Lorsque l'Inspecteur est ouvert, survoler un élément listé dans le panneau HTML affichera en surbrillance l'élément correspondant dans la page. Cliquer sur un élément dans le panneau HTML le sélectionne :</p> + +<p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre DOM.</p> + +<h2 id="Via_le_sélectionneur_de_noeuds">Via le sélectionneur de noeuds</h2> + +<p>Pour sélectionner un élément de la page, il faut activer l'outil en cliquant sur son icône : <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;">. Ensuite, survoler un élément de la page l'affichera en surbrillance. Cliquer sur un élément le sélectionne :</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> diff --git a/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html b/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html new file mode 100644 index 0000000000..a870167e19 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html @@ -0,0 +1,46 @@ +--- +title: Utiliser l'API de l'Inspecteur +slug: Outils/Inspecteur/Comment/Utiliser_l_API_de_l_Inspecteur +tags: + - Inspector + - Reference + - Référence(2) + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API +--- +<div>{{ToolsSidebar}}</div> + +<p>Les modules complémentaires de Firefox peuvent accéder aux objets du contexte <code>chrome://browser/content/devtools/inspector/inspector.xul </code>suivants :</p> + +<h3 id="window.inspector">window.inspector</h3> + +<p>Défini dans <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Attributs et fonctions :</p> + +<ul> + <li>.selection - information sur la sélection de l'inspecteur : + <ul> + <li>.isNode() - retourne true si la sélection est un nœud.</li> + <li>.node - retourne l'élément de la page</li> + <li>.window - l'objet window de la frame dans laquelle la sélection est.</li> + </ul> + </li> + <li>.markDirty() - marque la page comme ayant été modifié par l'inspecteur. un avertissement sera affiché en quittant la page, car les changements faits par l'inspecteur sont réécrits au rechargement.</li> +</ul> + +<p>Événements Bindables :</p> + +<h4 id="markuploaded">markuploaded</h4> + +<p>Appelé quand le panneau de gauche a été rafraichi après un changement de panneau</p> + +<h4 id="ready">ready</h4> + +<p>Appelé au premier <code>markuploaded</code>.</p> + +<h4 id="pseudoclass">pseudoclass</h4> + +<p>Appelé après affichage ("toggle") d'une pseudo classe</p> + +<h4 id="layout-change">layout-change</h4> + +<p>"low-priority change event for things like paint and resize." (évènements de changement basse priorité pour les choses comme paint et resize).</p> diff --git a/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html b/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html new file mode 100644 index 0000000000..1b3f3c13b2 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html @@ -0,0 +1,16 @@ +--- +title: Utiliser l'Inspecteur depuis la Console Web +slug: Outils/Inspecteur/Comment/Utiliser_l_Inspecteur_depuis_la_Console_Web +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console +--- +<div>{{ToolsSidebar}}</div> + +<p>L'élément qui est sélectionné dans <a href="/fr/docs/Outils/inspecteur" title="/fr/docs/Outils/inspecteur">l'Inspecteur</a> peut être <span class="tgtColl" id="ctl00_cC_ucResEM_lblTranslation" lang="1036">référencé dans la <a href="/fr/docs/Outils/Web_Console" title="/fr/docs/Outils/Web_Console">Console Web</a></span> en utilisant la variable <code>$0</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10057/console-$0.png" style="display: block; margin-left: auto; margin-right: auto; width: 761px;">Les éléments DOM dans la Console Web ont une icône en forme de cible à côté d'eux. Survoler cette icône met l'élément en surbrillance. Cliquer sur cette icône sélectionne l'élément dans l'Inspecteur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10059/console-highlight.png" style="display: block; margin-left: auto; margin-right: auto; width: 760px;"></p> diff --git a/files/fr/tools/page_inspector/how_to/view_background_images/index.html b/files/fr/tools/page_inspector/how_to/view_background_images/index.html new file mode 100644 index 0000000000..9d6bdb09e4 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/view_background_images/index.html @@ -0,0 +1,12 @@ +--- +title: Prévisualiser des images de fond +slug: Outils/Inspecteur/Comment/Prévisualiser_des_images_de_fond +translation_of: Tools/Page_Inspector/How_to/View_background_images +--- +<div>{{ToolsSidebar}}</div><p>Dans <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">l'onglet des règles</a>, il est possible de prévisualiser les images spécifiées avec la propriété <a href="/fr/docs/Web/CSS/background-image">background-image</a>. Il suffit de survoler cette règle :</p> + +<h4 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/11215/css-image-preview.png" style="display: block; height: 422px; margin-left: auto; margin-right: auto; width: 585px;"></h4> + +<p>Depuis Firefox 41, lors d'un clic-droit sur la déclaration de l'image, il y a une option pour copier l'image en tant que data URL :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11213/css-copy-image-data-url.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 587px;"></p> diff --git a/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html b/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html new file mode 100644 index 0000000000..a00bd795b5 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html @@ -0,0 +1,14 @@ +--- +title: Visualiser les transformations +slug: Outils/Inspecteur/Comment/Visualiser_les_transformations +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Visualize_transforms +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Visualiser_les_transformations">Visualiser les transformations</h2> + +<p>Survoler une propriété <a href="/fr/docs/Web/CSS/transform"><code>transform</code></a> dans <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">l'onglet des règles</a>, fera apparaitre la transformation dans la page :<img alt="" src="https://mdn.mozillademos.org/files/9961/transform.png" style="display: block; height: 1670px; margin-left: auto; margin-right: auto; width: 1968px;"></p> diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html new file mode 100644 index 0000000000..a5c09e4f45 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html @@ -0,0 +1,26 @@ +--- +title: Inspecteur d'animations (Firefox 41 et 42) +slug: >- + Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +--- +<div>{{ToolsSidebar}}</div> + +<div class="note"> +<p>Il est à noter que l'interface utilisateur de l'inspecteur d'animations a été refaite dans Firefox 43. Pour voir à quoi ressemble cette nouvelle interface, consultez la page : <a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">"Travailler avec des animations"</a>.</p> +</div> + +<p>L’inspecteur d'animations permet de :</p> + +<ul> + <li>Voir des informations sur toutes les animations fonctionnant dans la page.</li> + <li>Démarrer/stopper toutes les animations</li> + <li>Démarrer/arrêter/rembobiner/avancer rapidement chaque animation</li> + <li>Aller à un point spécifique de l'animation</li> + <li>Mettre en surbrillance et inspecter le noeud animé</li> + <li>Ajuster la vitesse de chaque animation</li> + <li>Voir si une animation tourne dans le compositor thread (une icône en forme d'éclair est affichée à côté des animations dans ce cas)</li> +</ul> + +<p>{{EmbedYouTube("0vSIuKaqD8o")}}</p> diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html new file mode 100644 index 0000000000..6d6ea21654 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html @@ -0,0 +1,84 @@ +--- +title: Exemples d'animations +slug: Outils/Inspecteur/Comment/Work_with_animations/Animations_examples +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions +--- +<div>{{ToolsSidebar}}</div><h2 id="firefox-logo-animation" name="firefox-logo-animation">firefox-logo-animation</h2> + +<p>Exemples d'animations utilisant les <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">transitions CSS</a>.</p> + +<h3 id="Contenu_HTML">Contenu HTML</h3> + +<pre class="brush: html"><div class="channel"> + <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/> + <span class="note">Firefox Developer Edition</span> +</div></pre> + +<h3 id="Contenu_CSS">Contenu CSS</h3> + +<pre class="brush: css">.channel { + padding: 2em; + margin: 0.5em; + box-shadow: 1px 1px 5px #808080; + margin: 1.5em; +} + +.channel > * { + vertical-align: middle; + line-height: normal; +} + +.icon { + width: 50px; + height: 50px; + filter: grayscale(100%); + transition: transform 750ms ease-in, filter 750ms ease-in-out; +} + +.note { + margin-left: 1em; + font: 1.5em "Open Sans",Arial,sans-serif; + overflow: hidden; + white-space: nowrap; + display: inline-block; + + opacity: 0; + width: 0; + transition: opacity 500ms 150ms, width 500ms 150ms; +} + +.icon#selected { + filter: grayscale(0%); + transform: scale(1.5); +} + +.icon#selected+span { + opacity: 1; + width: 300px; +} +</pre> + +<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> + +<pre class="brush: js">function toggleSelection(e) { + if (e.button != 0) { + return; + } + if (e.target.classList.contains("icon")) { + var wasSelected = (e.target.getAttribute("id") == "selected"); + clearSelection(); + if (!wasSelected) { + e.target.setAttribute("id", "selected"); + } + } +} + +function clearSelection() { + var selected = document.getElementById("selected"); + if (selected) { + selected.removeAttribute("id"); + } +} + +document.addEventListener("click", toggleSelection);</pre> diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html new file mode 100644 index 0000000000..929963fa4a --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html @@ -0,0 +1,107 @@ +--- +title: 'Exemple d''inspecteur d''animations : Web Animations API' +slug: >- + Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_example:_Web_Animations_API +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API +--- +<div>{{ToolsSidebar}}</div><h2 id="firefox-logo-animation" name="firefox-logo-animation">logo-animation-Firefox</h2> + +<p>Exemple d'animation utilisant la <a href="/fr/docs/Web/API/Web_Animations_API">Web Animations API</a>.</p> + +<h3 id="Contenu_HTML">Contenu HTML</h3> + +<pre class="brush: html"><div class="channel"> + <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/> + <span id="note">Firefox Developer Edition</span> +</div></pre> + +<h3 id="Contenu_CSS">Contenu CSS</h3> + +<pre class="brush: css">.channel { + padding: 2em; + margin: 0.5em; + box-shadow: 1px 1px 5px #808080; + margin: 1.5em; +} + +.channel > * { + vertical-align: middle; + line-height: normal; +} + +#icon { + width: 50px; + height: 50px; + filter: grayscale(100%); +} + +#note { + margin-left: 1em; + font: 1.5em "Open Sans",Arial,sans-serif; + overflow: hidden; + white-space: nowrap; + display: inline-block; + opacity: 0; + width: 0; +} +</pre> + +<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> + +<pre class="brush: js">var iconKeyframeSet = [ + { transform: 'scale(1)', filter: 'grayscale(100%)'}, + { filter: 'grayscale(100%)', offset: 0.333}, + { transform: 'scale(1.5)', offset: 0.666 }, + { transform: 'scale(1.5)', filter: 'grayscale(0%)'} +]; + +var noteKeyframeSet = [ + { opacity: '0', width: '0'}, + { opacity: '1', width: '300px'} +]; + +var iconKeyframeOptions = { + duration: 750, + fill: 'forwards', + easing: 'ease-in', + endDelay: 100 +} + +var noteKeyframeOptions = { + duration: 500, + fill: 'forwards', + easing: 'ease-out', + delay: 150 +} + +var icon = document.getElementById("icon"); +var note = document.getElementById("note"); + +var iconAnimation = icon.animate(iconKeyframeSet, iconKeyframeOptions); +var noteAnimation = note.animate(noteKeyframeSet, noteKeyframeOptions); + +iconAnimation.pause(); +noteAnimation.pause(); + +var firstTime = true; + +function animateChannel(e) { + if (e.button != 0) { + return; + } + if (e.target.id != "icon") { + return; + } + if (firstTime) { + iconAnimation.play(); + noteAnimation.play(); + firstTime = false; + } else { + iconAnimation.reverse(); + noteAnimation.reverse(); + } +} + +document.addEventListener("click", animateChannel); +</pre> diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..0bbcab5957 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,180 @@ +--- +title: travailler avec les animations +slug: Outils/Inspecteur/Comment/Work_with_animations +tags: + - Guide + - Inspecteur + - Outils +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +<div>{{ToolsSidebar}}</div> + +<p>Cet article couvre trois outils que vous pouvez utilisez pour visualiser et éditer des animations:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">the animation inspector</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">editing @keyframes</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">editing timing functions</a></li> +</ul> + +<h2 id="Animation_inspector">Animation inspector</h2> + +<p>The Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">Animations view</a> displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.</p> + +<p>It displays animations created using <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS @keyframes rules</a>, or the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>. Starting in Firefox 48, it will show animations applied to the <code><a href="/en-US/docs/Web/CSS/::before">::before</a></code> and <code><a href="/en-US/docs/Web/CSS/::after">::after</a></code> pseudo-elements.</p> + +<p>To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.</p> + +<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}</p> + +<p>These animations are made using the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>.</p> + +<p>Let's use the animation inspector to see what's going on in this example.</p> + +<ol> + <li>Right-click in the box and select "Inspect Element"</li> + <li>Make sure the selected element is the <code><div class="channel"></code></li> + <li>Switch over to the "Animations" tab</li> + <li>Play the animation</li> +</ol> + +<p>{{EmbedYouTube("XmKeAKryE5I")}}</p> + +<p>Let's take a closer look at the contents of the animation inspector here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16354/animation_pane.png" style="border: 1px solid black; display: block; height: 297px; margin-left: auto; margin-right: auto; width: 394px;"></p> + +<p>It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).</p> + +<h3 id="Animation_bars">Animation bars</h3> + +<p>Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:</p> + +<ul> + <li>blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property</li> + <li>orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used</li> + <li>green if the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> was used</li> +</ul> + +<p>The bar contains a lightning bolt icon <img alt="" src="https://mdn.mozillademos.org/files/13106/compositor.png" style="width: 15px;"> if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</p> + +<p>The bar is shaped to reflect the easing effect used for the animation. In the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out.</p> + +<p>If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS <code>@keyframes</code>, there is one bar for each animation, labeled with its name.</p> + +<p>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>delay</code> and <code>endDelay</code></a> are both represented.</p> + +<p>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:</p> + +<ul> + <li>the type of animation: CSS transition, CSS animation, or Web Animations API</li> + <li>the duration of the animation</li> + <li>the animation's start and end delay</li> + <li>the animation's easing (or timing function).</li> + <li>the animation's fill</li> + <li>the Playback rate of the animation</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16355/animation_details.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p> + +<h3 id="Information_about_the_animated_element">Information about the animated element</h3> + +<p>To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.</p> + +<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). Clicking this icon locks the highlighter on the element.</p> + +<h3 id="Animation_details">Animation details</h3> + +<p>If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for <code>img#icon</code>'s animation:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16356/animation_icon_details.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p> + +<p>This is telling us that two properties were modified: <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. <code>filter</code> was given a value at 250ms and <code>transform</code> at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16357/animation_icon_scale.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p> + +<p>This is essentially a visual representation of the animation's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API#JavaScript_Content">keyframes</a>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> iconKeyframeSet <span class="operator token">=</span> <span class="punctuation token">[</span> + <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1)'</span><span class="punctuation token">,</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)' </span><span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="punctuation token">{</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.333</span><span class="punctuation token"> }</span><span class="punctuation token">,</span> + <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.666</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(0%)'</span><span class="punctuation token"> }</span> +<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Application_to_the_example">Application to the example</h3> + +<p>Applying all this to our example, we can see that:</p> + +<ul> + <li>The animation involved two elements, <code>span#note</code> and <code>img#icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon.</li> + <li>The <code>img#icon</code> animation: + <ul> + <li>animated the <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> properties, to scale the icon and color it</li> + <li>lasted 750ms, had an <code>endDelay</code> of 100ms</li> + <li>used the compositor thread</li> + <li>was given an <code><a href="/en-US/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> value of <code>ease-in</code>: you can see this by the concave shape of the green bar.</li> + </ul> + </li> + <li>The <code>span#note</code> animation: + <ul> + <li>animated the <code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> properties, to make the name gradually appear</li> + <li>lasted 500ms, and had a <code>delay</code> of 150ms</li> + <li>was given an <code><a href="/en-US/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> value of <code>ease-out</code>: you can see this by the convex shape of the green bar.</li> + </ul> + </li> +</ul> + +<h3 id="Animation_playback">Animation playback</h3> + +<p>At the top of the animation inspector:</p> + +<ul> + <li>there are buttons to play/pause and restart the animation</li> + <li>there's a dropdown to change the animation playback rate</li> + <li>the current time in the animation is displayed.</li> +</ul> + +<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when.</p> + +<h3 id="Further_information_about_animation_compositing">Further information about animation compositing</h3> + +<p>If you open <a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing.html">animation-inspector-compositing.html</a> and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:</p> + +<ul> + <li>The white lightning bolt icon now indicates whether all the animation properties have been optimized by running them through the compositor, where possible.</li> + <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "All animation properties are optimized."</li> + <li>The expanded animation information now includes a lightning bolt icon next to the properties whose animation has been optimized via the compositor.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16359/animation_swoosh_01.png" style="border: 1px solid black; display: block; height: 313px; margin: 0px auto; width: 549px;"></p> + +<p>Let's now look at <a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing-silly.html">animation-inspector-compositing-silly.html</a> — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the <code>transform</code> property is deliberately not handed over to the compositor to handle. The Animation Inspector will tell you this — look at it now and you'll see that:</p> + +<ul> + <li>The white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the relevant properties are being optimized by the compositor.</li> + <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "Some animation properties are optimized."</li> + <li>Properties whose animation is <strong>not</strong> being optimized, but could be if you improved your code, are now given a dotted underline — see transform in the screenshot below. Hovering over this gives you a tooltip that explains why. In this case, the message is "Animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time."</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16360/animation_not_optimized.png" style="border: 1px solid black; display: block; height: 375px; margin: 0px auto; width: 549px;"></p> + +<h2 id="Edit_keyframes">Edit @keyframes</h2> + +<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p> + +<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p> + +<h2 id="Edit_timing_functions">Edit timing functions</h2> + +<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p> + +<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p> + +<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> + +<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p> + +<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p> + +<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p> diff --git a/files/fr/tools/page_inspector/index.html b/files/fr/tools/page_inspector/index.html new file mode 100644 index 0000000000..ff14d6634c --- /dev/null +++ b/files/fr/tools/page_inspector/index.html @@ -0,0 +1,61 @@ +--- +title: Inspecteur +slug: Outils/Inspecteur +tags: + - CSS + - DOM + - Développement Web + - HTML + - Outils + - Styles +translation_of: Tools/Page_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>L'inspecteur sert à examiner et modifier l'HTML et le CSS d'une page web.</p> + +<p>Il est possible d'examiner des pages ouvertes dans un navigateur Firefox local, ou bien dans des cibles distantes, par exemple un navigateur Firefox pour Android. Voir la page <a href="/fr/docs/Tools/Remote_Debugging">débogage distant </a>pour apprendre comment connecter les outils de développement à une cible distante.</p> + +<hr> +<h2 id="Visite_guidée_de_linterface_utilisateur">Visite guidée de l'interface utilisateur</h2> + +<p>Pour vous repérer dans l’inspecteur, voici une courte <a href="/fr/docs/Tools/Page_Inspector/UI_Tour">visite guidée de l'interface utilisateur</a>.</p> + +<p>Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du <a href="/fr/docs/Tools/Page_Inspector/3-pane_mode">mode à trois panneaux.</a></p> + +<hr> +<h2 id="Comment">Comment ?</h2> + +<p>Pour savoir ce qu'il est possible de faire avec l'inspecteur, regardez les guides pratiques suivants :</p> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Ouvrir l'Inspecteur</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examiner et éditer l'HTML</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examiner et éditer le modèle de boites</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspecter et sélectionner des couleurs</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_fonts">Éditer les polices d'écriture</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualiser les transformations</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Utiliser l'API de l'inspecteur</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Select_an_element">Sélectionner un élément</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examiner et éditer le CSS</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examiner les écouteurs d'évènements</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">Travailler avec des animations</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Éditer les filtres CSS</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Éditer les formes CSS</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/View_background_images">Voir les images de fond</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Utiliser l'inspecteur depuis la console web</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examiner les grilles CSS</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Examiner les layout CSS flexbox</a></li> +</ul> +</div> + +<hr> +<h2 id="Référence">Référence</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Page_Inspector/Keyboard_shortcuts">Raccourcis clavier</a></li> + <li><a href="/fr/docs/Tools/Tools_Toolbox#Inspector">Paramètres</a></li> +</ul> +</div> diff --git a/files/fr/tools/page_inspector/keyboard_shortcuts/index.html b/files/fr/tools/page_inspector/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..d69433edb7 --- /dev/null +++ b/files/fr/tools/page_inspector/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: Raccourcis Clavier +slug: Outils/inspecteur/Raccourcis_clavier +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p> + +<h3 id="Raccourcis_clavier">Raccourcis clavier</h3> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/fr/tools/page_inspector/ui_tour/index.html b/files/fr/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..b0f9e07205 --- /dev/null +++ b/files/fr/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,94 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Inspecteur/UI_Tour +translation_of: Tools/Page_Inspector/UI_Tour +--- +<div>{{ToolsSidebar}}</div> + +<p>Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :</p> + +<ul> + <li>Le bouton de sélection d'éléments</li> + <li>Le panneau HTML</li> + <li>Le panneau CSS</li> +</ul> + +<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;">Ce guide est volontairement bref. Des liens vous permettent d'accéder aux pages détaillées expliquant le fonctionnement de l'inspecteur.</p> + +<h2 id="Le_bouton_de_sélection_d'éléments">Le bouton de sélection d'éléments</h2> + +<p>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 :</p> + +<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Notez qu'il fait partie de la <a href="/fr/docs/Outils/Outils_boite_à_outils#Barre_d'outils">barre d'outils de la boîte à outils</a>, et qu'il est immédiatement accessible depuis n'importe quel outil, pas seulement depuis l'inspecteur.</p> + +<p>Pour savoir comment sélectionner un élément, voir le guide pour <a href="/fr/docs/Outils/Inspecteur/Comment/Sélectionner_un_élément">sélectionner un élément</a>.</p> + +<h2 id="Le_panneau_HTML">Le panneau HTML</h2> + +<p>L'inspecteur est divisé en deux parties. Celle de gauche est occupée par le panneau HTML:</p> + +<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Pour en savoir plus sur la structure du panneau HTML, voir la page "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML">Examiner et éditer le code HTML</a>".</p> + +<h2 id="Le_panneau_CSS">Le panneau CSS</h2> + +<p>La partie droite est occupée par le panneau CSS :</p> + +<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;">Ce panneau CSS est composé de 5 vues :</p> + +<ul> + <li>Règles</li> + <li>Calculé</li> + <li>Disposition</li> + <li>Animations</li> + <li>Polices</li> +</ul> + +<p>Utilisez ces onglets pour passer d'une vue à une autre.</p> + +<div class="note"> +<p><strong>Note </strong>: Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du <a href="/fr/docs/Tools/Page_Inspector/3-pane_mode">mode à trois panneaux.</a></p> +</div> + +<h3 id="La_vue_Règles">La vue "Règles"</h3> + +<p>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.</p> + +<p>Voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS">Examiner et éditer le CSS</a>" pour plus de détails.</p> + +<h3 id="La_vue_Calculé">La vue "Calculé"</h3> + +<p>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.</p> + +<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p> </p> + +<p>Pour en savoir plus sur le modèle de boite, voir "<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examiner et éditer le modèle de boite</a>". Il est a noter qu'avant Firefox 50, le modèle de boite n'apparaissait pas dans cet onglet puisqu'il avait le sien.</p> + +<p>Pour plus de détails sur les déclarations CSS de cette vue, voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#Examiner_le_CSS_calculé">Examiner le CSS calculé</a>".</p> + +<h3 id="La_vue_Polices">La vue "Polices"</h3> + +<p>Cette vue liste toutes les polices présentes dans la page, ainsi que des exemples éditables.</p> + +<p> </p> + +<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Voir_les_polices">Voir les polices</a>" pour plus de détails.</p> + +<h3 id="La_vue_Animations">La vue "Animations"</h3> + +<p>Cette vue apporte des détails sur les animations relatives à l'élément sélectionné, ainsi qu'un contrôleur pour les interrompre.</p> + +<p> </p> + +<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p> </p> + +<p>Voir "<a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">Travailler avec les animations</a>" pour plus de détails.</p> |