Remove the emphasis in the title (#851)

* Remove the emphasis in the title
* UPDT: Refresh from english version
* FIX: Fix typo

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>

1 files changed, 354 insertions, 243 deletions

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
index 243367eddc..f4a721e22d 100644
--- 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
@@ -1,327 +1,438 @@
 ---
-title: Éxaminer et modifier le code HTML
+title: Examiner et modifier le code HTML
 slug: Tools/Page_Inspector/How_to/Examine_and_edit_HTML
 tags:
+  - Debugging
+  - Firefox
   - Guide
   - Inspector
-  - Outils
+  - Mozilla
   - Tools
 translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML
 original_slug: Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_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>
+<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>
+<h2 id="navigating_the_html">Naviguer dans le HTML</h2>
 
-<h3 id="Fil_d'Ariane_HTML">Fil d'Ariane HTML</h3>
+<h3 id="html_breadcrumbs">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>En bas du panneau HTML, se trouve un <a href="https://fr.wikipedia.org/wiki/Fil_d%27Ariane_%28ergonomie%29">fil d'Ariane</a> (« Breadcrumbs » en Anglais). 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><img alt="" src="html_breadcrumbs.png" style="display: block; margin-left: auto; margin-right: auto;"></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>
+<p>Le fil possède ses propres <a href="/fr/docs/Tools/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="searching">Recherche</h3>
+
+<p>Le champ de recherche de l'inspecteur de page correspond à toutes les balises du document actuel et de tous les cadres.</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. Il existe trois types de recherches qui sont effectuées automatiquement en fonction de ce que vous saisissez : une recherche en texte intégral, une recherche par sélecteur CSS et une recherche XPath.</p>
+
+<h4 id="full_text_search">Recherche en texte intégral</h4>
+
+<p>La recherche en texte intégral sera toujours exécutée, indépendamment de ce que vous saisissez. Cela vous permet de trouver les sélecteurs CSS et les expressions XPath se trouvant dans le texte.</p>
 
-<h3 id="Recherche">Recherche</h3>
+<h4 id="css_selector_search">Recherche de sélecteurs CSS</h4>
 
-<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>Vous pouvez rechercher des éléments en saisissant un <a href="/fr/docs/Glossary/CSS_Selector">sélecteur CSS</a>.</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>Au fur et à mesure que vous tapez, une fenêtre contextuelle d'autocomplétion affiche tous les attributs de classe ou d'ID qui correspondent au terme de recherche actuel :</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="search_html.png" style="display: block; margin-left: auto; margin-right: auto;"></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>Appuyez sur <kbd>Haut</kbd> et <kbd>Bas</kbd> pour faire défiler les suggestions, <kbd>Tab</kbd> pour choisir la suggestion actuelle, puis <kbd>Entrer</kbd> pour sélectionner le premier nœud avec cet attribut.</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>
+<div>{{EmbedYouTube("AKBhnfp1Opo")}}</siv>
 
-<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>Pour faire défiler les correspondances, appuyez sur <kbd>Entrer</kbd>. Vous pouvez revenir en arrière en utilisant <kbd>Maj</kbd> + <kbd>Entrer</kbd>.</p>
 
-<p>{{EmbedYouTube("AKBhnfp1Opo")}}</p>
+<h4 id="xpath_search">Recherche avec une expression XPath</h4>
 
-<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>
+<p>Il est également possible d'effectuer une recherche via <a href="/fr/docs/Web/XPath">XPaths</a>. Cela vous permet de rechercher des éléments spécifiques sans le conflit des mots correspondants dans le texte. Par exemple, <code>//a</code> correspond à tous les éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> mais pas à la lettre « a » dans le contenu du texte. En outre, il permet d'effectuer des recherches plus avancées, comme la recherche d'éléments commençant par un texte spécifique, par exemple.</p>
 
-<h3 id="Arbre_HTML">Arbre HTML</h3>
+<p><img alt="Correspondance d'une recherche d'inspecteur utilisant une expression XPath" src="xpath_search.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
 
-<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>
+<h3 id="html_tree">Arbre HTML</h3>
 
-<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>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 <kbd>Alt</kbd> développera tous les nœuds inclus dans l'élément.</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><img alt="Le nouvel inspecteur HTML de Firefox 57" src="html_tree.png" style="display: block; margin-left: auto; margin-right: auto;"></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>Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.</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>
+<p>Les nœuds qui ne sont pas visibles sont affichés de façon délavée/désaturée. Cela peut se produire pour différentes raisons comme l'utilisation de <a href="/fr/docs/Web/CSS/display"><code>display: none</code></a> ou que l'élément n'a pas de dimensions.</p>
+
+<p>Une ellipse est affichée entre la balise ouvrante et la balise fermante d'un élément lorsque le nœud est réduit s'il a un contenu plus important. Les enfants sont alors indiqués dans l'arbre par cette icône : <img alt="" src="child-node-indicator.png"></p>
+
+<p>Des marqueurs (« badges ») sont affichés à droite de certains nœuds. Le tableau ci-dessous explique la signification de chaque badge :</p>
+
+<table class="standard-table" id="node-markers">
+  <tbody>
+    <tr>
+      <td><code>event</code></td>
+      <td>L'élément a un ou plusieurs écouteurs d'événements qui lui sont attachés. Cliquer sur le marqueur ouvre une infobulle listant les écouteurs d'événements et permet pour chaque écouteur de passer à la ligne de code JavaScript dans le <a href="/fr/docs/Tools/Debugger">Debugger</a> où l'écouteur est défini.</td>
+    </tr>
+    <tr>
+      <td><code>scroll</code></td>
+      <td>L'élément est un <a href="/fr/docs/Glossary/scroll_container">conteneur de défilement</a>, c'est-à-dire qu'il a soit <code>overflow: scroll</code> appliqué, soit <code>overflow: auto</code> et un contenu suffisant pour provoquer un <a href="/fr/docs/Web/CSS/CSS_Overflow">débordement avec défilement</a>.<br>
+      <br>
+      Si la préférence <code>devtools.overflow.debugging.enabled</code> est définie sur <code>true</code>, le basculement du badge <code>scroll</code> mettra en évidence tous les éléments causant le débordement, et ces nœuds afficheront en plus le badge <code>overflow</code>.</td>
+    </tr>
+    <tr>
+      <td><code>overflow</code></td>
+      <td>L'élément provoque un <a href="/fr/docs/Web/CSS/CSS_Overflow">débordement avec défilement</a> dans un <a href="/fr/docs/Glossary/scroll_container">conteneur de défilement</a> (soit le nœud actuel ou un nœud parent — le nœud affecté affichera le badge <code>scroll</code>).
+      <div class="notecard note">
+        <p><b>Note :</b></p>
+        <p>Le badge <code>overflow</code> est introduit dans Firefox 83. Dans les versions antérieures, il peut être activé en utilisant la préférence <code>devtools.overflow.debugging.enabled</code> définie sur <code>true</code>.</p>
+      </div>
+    </td>
+    </tr>
+    <tr>
+      <td><code>grid</code></td>
+      <td>L'élément est un <a href="/fr/docs/Glossary/Grid_Container">conteneur de grille</a>, c-à-d. qu'on lui a appliqué <a href="/fr/docs/Web/CSS/display"><code>display: grid</code></a>. En cliquant sur le marqueur, on active le surligneur de grille.</td>
+    </tr>
+    <tr>
+      <td><code>flex</code></td>
+      <td>L'élément est un <a href="/fr/docs/Glossary/Flex_Container">conteneur flexible</a>, c-à-d. qu'on lui a appliqué <a href="/fr/docs/Web/CSS/display"><code>display: flex</code></a>. En cliquant sur le marqueur, vous activez le surligneur de flexbox.</td>
+    </tr>
+    <tr>
+      <td><code>inline-grid</code></td>
+      <td>L'élément est un conteneur de grille en ligne, c-a-d. qu'il a <a href="/fr/docs/Web/CSS/display"><code>display: inline-grid</code></a> ou <code>display: inline grid</code> qui lui est appliqué. En cliquant sur le marqueur, vous activez le surligneur de grille.</td>
+    </tr>
+    <tr>
+      <td><code>inline-flex</code></td>
+      <td>L'élément est un conteneur inline flex, c'est-à-dire qu'il a <a href="/fr/docs/Web/CSS/display"><code>display: inline-flex</code></a> ou <code>display: inline flex</code> qui lui est appliqué. En cliquant sur le marqueur, vous activez le surligneur de flexbox.</td>
+    </tr>
+    <tr>
+      <td><code>personnalisé...</code></td>
+      <td>L'élément est un élément personnalisé. En cliquant sur le marqueur, on passe à la ligne de code JavaScript dans le débogueur où l'élément personnalisé a été défini.</td>
+    </tr>
+  </tbody>
+</table>
 
-<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 class="notecard note">
+  <p><b>Note :</b></p>
+  <p>Il existe des raccourcis clavier utiles qui peuvent être utilisés dans l'arborescence HTML — voir la <a href="/fr/docs/Tools/Keyboard_shortcuts#html_pane">liste des raccourcis clavier du volet HTML</a>.</p>
 </div>
 
-<h3 id="before_et_after">::before et ::after</h3>
+<h3 id="before_and_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>Vous pouvez inspecter les pseudo-éléments ajoutés à l'aide de <a href="/fr/docs/Web/CSS/::before"><code>::before</code></a> et <a href="/fr/docs/Web/CSS/::after"><code>::after</code></a> :</p>
 
 <p>{{EmbedYouTube("ecfqTGvzsNc")}}</p>
 
-<h3 id="Noeuds_ne_contenant_que_des_espaces">Noeuds ne contenant que des espaces</h3>
+<h3 id="custom_element_definition">Définition d'un élément personnalisé</h3>
 
-<div class="geckoVersionNote">Nouveauté de Firefox 52</div>
+<p>Lorsque vous ouvrez l'inspecteur sur une page qui comprend des éléments personnalisés, vous pouvez afficher la définition de la classe de l'élément personnalisé dans le débogueur :</p>
 
-<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>
+<ol>
+  <li>Inspecter l'élément</li>
+  <li>Cliquez sur le mot <code>personnalisé</code>.</li>
+</ol>
 
-<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><img alt="" src="custom_pc_01.png" style="display: block; margin: 0px auto;"></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>La source de la classe de l'élément sera affichée dans le débogueur.</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="custom_pc_02.png" style="display: block; margin: 0px auto;"></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>
+<h3 id="whitespace-only_text_nodes">Nœuds de texte avec espaces blancs uniquement</h3>
 
-<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>
+<p>Les développeurs Web n'écrivent pas tout leur code sur une seule ligne de texte. Ils utilisent des espaces blancs tels que des espaces, des retours ou des tabulations entre leurs éléments HTML, car cela rend le balisage plus lisible.</p>
 
-<h3 id="Shadow_roots">Shadow roots</h3>
+<p>Habituellement, cet espace blanc semble n'avoir aucun effet et aucune sortie visuelle, mais en fait, lorsqu'un navigateur analyse le HTML, il génère automatiquement des nœuds de texte anonymes pour les éléments qui ne sont pas contenus dans un nœud. Cela inclut l'espace blanc (qui est après tout un type de texte).</p>
 
-<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>Si ces nœuds de texte générés automatiquement sont <a href="/fr/docs/Web/CSS/Visual_formatting_model#inline-level_elements_and_inline_boxes">des éléments en ligne et les boîtes en ligne</a>, les navigateurs leur donneront une largeur et une hauteur non nulles. Vous trouverez alors des écarts étranges entre les éléments, même si vous n'avez pas défini de marge ou de padding sur eux.</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>Depuis Firefox 52, l'inspecteur affiche ces nœuds d'espacement, ce qui vous permet de voir d'où viennent les lacunes de votre balisage. Les nœuds d'espace blanc sont représentés par un point : <img alt="" src="new-whitespace-text-indicator.png"> et vous obtenez une info-bulle explicative lorsque vous les survolez :</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="" src="white_space_only.png" style="display: block; margin-left: auto; margin-right: auto;"></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>Pour voir cela en action, voyez la démo à l'adresse suivante <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>
 
-<p>Cette fonctionnalité est utile pour trouver la source du contenu d'un élément <code>&lt;slot&gt;</code></p>
+<h3 id="shadow_roots">Racines fantômes</h3>
 
-<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>
+<p>Les racines fantômes présentes dans le DOM sont exposées dans la page HTML de la même manière que le DOM régulier. La racine fantôme est signifiée par un nœud nommé <code>#shadow-root</code> — vous pouvez cliquer sur sa flèche d'expansion pour voir le contenu complet du DOM fantôme, puis manipuler les nœuds contenus de la même manière que les autres parties du DOM de la page (bien qu'avec un jeu de fonctionnalités limité — vous ne pouvez pas, par exemple, glisser-déposer ou supprimer les nœuds du DOM fantôme).</p>
+
+<p><img alt="Une vue d'une racine fantôme affichée à l'intérieur de l'arbre DOM dans les DevTools de Firefox" src="inspector_shadowdom.png" style="display: block; margin: 0 auto;"></p>
 
-<h2 id="Menu_contextuel">Menu contextuel</h2>
+<p>Si un DOM fantôme contient un élément « slotted » (un élément avec un attribut <code>slot</code> après avoir été inséré à l'intérieur d'un élément <a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</code></a> — voir <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots#adding_flexibility_with_slots">l'utilisation des templates et des slots</a> pour une explication de leur utilisation), l'élément « slotté » sera affiché à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</code></a> correspondant, avec un lien « reveal » à côté. En cliquant sur le lien « reveal », l'élément avec l'attribut <code>slot</code> sera mis en évidence tel qu'il existe en dehors du DOM fantôme.</p>
 
-<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="Une vue d'une racine fantôme affichée à l'intérieur de l'arbre DOM dans les DevTools de Firefox" src="inspector_slot.png" style="display: block; margin: 0 auto;"></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>
+<p>C'est très utile lorsque vous avez un élément <code>&lt;slot&gt;</code> et que vous ne pouvez pas trouver la source de son contenu.</p>
+
+<div class="notecard note">
+  <p><b>Note :</b></p>
+  <p>L'inspection Shadow DOM a été implémentée dans Firefox 61, mais était cachée derrière le préfixe <code>dom.webcomponents.shadowdom.enabled</code> jusqu'à Firefox 63. Elle est maintenant activée par défaut.</p>
+</div>
 
-<h3 id="Référence_du_menu_contextuel">Référence du menu contextuel</h3>
+<h2 id="element_popup_context_menu">Menu contextuel de l'élément</h2>
+
+<p>Vous pouvez effectuer certaines tâches courantes sur un nœud spécifique à l'aide d'un menu contextuel. Pour activer ce menu, cliquez contextuellement sur l'élément. Le menu contient les éléments suivants — cliquez sur les liens pour trouver la description de chaque commande dans la liste de <a href="#context_menu_reference">Référence du menu contextuel</a> :</p>
+
+<ul>
+  <li><a href="#edit_as_html">Modifier comme HTML</a></li>
+  <li><a href="#create_new_node">Créer un nouveau nœud</a></li>
+  <li><a href="#duplicate_node">Dupliquer le nœud</a></li>
+  <li><a href="#delete_node">Supprimer le nœud</a></li>
+  <li>Attributs
+    <ul>
+      <li><a href="#attribute_add_attribute">Ajouter un attribut</a></li>
+      <li>Copier la valeur de l'attribut</li>
+      <li><a href="#attribute_edit_attribute">Modifier l'attribut</a></li>
+      <li><a href="#attribute_remove_attribute">Supprimer l'attribut</a></li>
+    </ul>
+  </li>
+  <li>Point d'arrêt sur...
+    <ul>
+      <li>Une modification du sous-arbre</li>
+      <li>Une modification d'un attribut</li>
+      <li>Une élimination de nœud</li>
+    </ul>
+  </li>
+  <li><a href="#use_in_console">Ouvrir dans la console</a></li>
+  <li><a href="#show_dom_properties">Afficher les propriétés DOM</a></li>
+  <li>Afficher les propriétés d'accessibilité</li>
+  <li>Changer de pseudo-classe
+    <ul>
+      <li><a href="#:hover">hover</a></li>
+      <li><a href="#:active">active</a></li>
+      <li><a href="#:focus">focus</a></li>
+      <li><a href="#focus-visible">focus-visible</a></li>
+      <li><a href="#focus-within">focus-within</a></li>
+      <li><a href="#visited">visited</a></li>
+    </ul>
+  </li>
+  <li><a href="#screenshot_node">Prendre une capture du nœud</a></li>
+  <li><a href="#scroll_into_view">Faire défiler la vue jusqu'au nœud</a></li>
+  <li>Copier
+    <ul>
+      <li><a href="#copy_inner_html">L'intérieur du HTML</a></li>
+      <li><a href="#copy_outer_html">L'extérieur du HTML</a></li>
+      <li><a href="#copy_unique_selector">Le sélecteur CSS</a></li>
+      <li><a href="#copy_css_path">Le chemin CSS</a></li>
+      <li>XPath</li>
+      <li><a href="#copy_image_data-url">L'image en tant que Data-URL</a></li>
+      <li><a href="#copy_attribute">L'attribut</a></li>
+    </ul>
+  </li>
+  <li>Coller
+    <ul>
+      <li><a href="#paste_inner_html">L'intérieur du HTML</a></li>
+      <li><a href="#paste_outer_html">L'extérieur du HTML</a></li>
+      <li><a href="#paste_before">Avant</a></li>
+      <li><a href="#paste_after">Après</a></li>
+      <li><a href="#paste_as_first_child">Le premier nœud enfant</a></li>
+      <li><a href="#paste_as_last_child">Le dernier nœud enfant</a></li>
+    </ul>
+  </li>
+  <li><a href="#expand_all">Tout développer</a></li>
+  <li><a href="#collapse">Tout réduire</a></li>
+  <li><a href="#open_link_in_new_tab">Ouvrir le lien dans un nouvel onglet</a> *</li>
+  <li><a href="#open_file_in_debugger">Ouvrir le fichier dans le débogueur</a> *</li>
+  <li><a href="#open_file_in_style-editor">Ouvrir le fichier dans l'éditeur de style</a> *</li>
+  <li><a href="#copy_link_address">Copier l'adresse du lien</a> *</li>
+</ul>
+
+<p>* Ces options n'apparaissent que dans certains contextes, par exemple l'option "Ouvrir le fichier dans l'éditeur de style" n'apparaît que lorsque vous cliquez contextuellement sur le haut d'un lien vers un fichier CSS.</p>
+
+<h3 id="context_menu_reference">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 &gt;&gt; l’intérieur du HTML</td>
-   <td>Copie le contenu interne à l'élément HTML</td>
-  </tr>
-  <tr>
-   <td>Copier &gt;&gt; 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 &gt;&gt; le sélecteur CSS</td>
-   <td>Copie un sélecteur CSS qui sélectionne uniquement l'élément.</td>
-  </tr>
-  <tr>
-   <td>Copier &gt;&gt; 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 &gt;&gt; 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 &gt;&gt; à 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 &gt;&gt; à 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 &gt;&gt; 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 &gt;&gt; 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 &gt;&gt; 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 &gt;&gt; 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 &lt;div&gt; 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 &gt;&gt; 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 &gt;&gt; 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 &gt;&gt; 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 &gt;&gt; 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>
+  <tbody>
+    <tr>
+      <td style="width: 30%;"><a id="edit_as_html">Modifier comme HTML</a></td>
+      <td><a href="#editing_html">Modifie le HTML de l'élément</a>.</td>
+    </tr>
+    <tr>
+      <td><a id="copy_inner_html">(Copier) L'intérieur du HTML</a></td>
+      <td>Copie le code HTML interne de l'élément.</td>
+    </tr>
+    <tr>
+      <td><a id="copy_outer_html">(Copier) L'extérieur du HTML</a></td>
+      <td>
+        <p>Copie le HTML externe de l'élément.</p>
+    
+        <p>Appuyer sur <kbd>Ctrl</kbd> + <kbd>C</kbd> (ou <kbd>Cmd</kbd> + <kbd>C</kbd> sur un Mac) effectue également cette action.</p>
+      </td>
+    </tr>
+    <tr>
+      <td><a id="copy_unique_selector">(Copier) Sélecteur unique/Sélecteur CSS</a></td>
+      <td>Copie un sélecteur CSS qui sélectionne l'élément de manière unique.</td>
+    </tr>
+    <tr>
+      <td><a id="copy_css_path">(Copier) Le chemin CSS</a></td>
+      <td>Copie un sélecteur CSS qui représente le chemin d'accès complet à l'élément.</td>
+    </tr>
+    <tr>
+      <td><a id="copy_image_data-url">(Copier) L'image en tant que Data-URL</a></td>
+      <td>Copie l'image sous forme d'URL data://, si l'élément sélectionné est une image.</td>
+    </tr>
+    <tr>
+      <td><a id="copy_attribute">(Copier) L'attribut</a></td>
+      <td>Copie l'attribut de l'élément.</td>
+    </tr>
+    <tr>
+      <td><a id="show_dom_properties">Afficher les propriétés DOM</a></td>
+      <td>Ouvre la <a href="/fr/docs/Tools/Web_Console#the_split_console">Console Web</a> et entre la commande de console « <code>inspect($0)</code> » pour <a href="/fr/docs/Tools/Web_Console#inspecting_objects">inspecter</a> l'élément actuellement sélectionné.</td>
+    </tr>
+    <tr>
+      <td><a id="use_in_console">Ouvrir dans la console</a></td>
+      <td>Affecte le nœud actuellement sélectionné à une variable nommée <code>temp0</code> (ou <code>temp1</code> si <code>temp0</code> est déjà pris, et ainsi de suite), puis ouvre la <a href="/fr/docs/Tools/Web_Console#the_split_console">Console Web</a>, vous permettant d'interagir avec ce nœud en utilisant la ligne de commande de la console.</td>
+    </tr>
+    <tr>
+      <td><a id="expand_all">Tout développer</a></td>
+      <td>Dans l'arborescence, développe l'élément actuel et tous les éléments qui se trouvent sous lui. Cela équivaut à maintenir la touche <kbd>Alt</kbd> et à cliquer sur le triangle de divulgation à côté d'un élément.</td>
+    </tr>
+    <tr>
+      <td><a id="collapse">Tout réduire</a></td>
+      <td>Dans l'arborescence, réduise l'élément actuel. Cela équivaut à cliquer sur la flèche de divulgation située à côté d'un élément qui a été développé.</td>
+    </tr>
+    <tr>
+      <td><a id="paste_inner_html">(Coller) L'intérieur du HTML</a></td>
+      <td>Colle le contenu du presse-papiers dans le nœud en tant que son <a href="/fr/docs/Web/API/Element/innerHTML">innerHTML</a>.</td>
+    </tr>
+    <tr>
+      <td><a id="paste_outer_html">(Coller) L'extérieur du HTML</a></td>
+      <td>Colle le contenu du presse-papiers dans le nœud en tant que son <a href="/fr/docs/Web/API/Element/outerHTML">outerHTML</a>.</td>
+    </tr>
+    <tr>
+      <td><a id="paste_before">(Coller) Avant</a></td>
+      <td>Colle le contenu du presse-papiers dans le document situé immédiatement avant ce nœud.</td>
+    </tr>
+    <tr>
+      <td><a id="paste_after">(Coller) Après</a></td>
+      <td>Colle le contenu du presse-papiers dans le document immédiatement après ce nœud.</td>
+    </tr>
+    <tr>
+      <td><a id="paste_as_first_child">(Coller) Le premier nœud enfant</a></td>
+      <td>Colle le contenu du presse-papiers dans le document en tant que premier enfant de ce nœud.</td>
+    </tr>
+    <tr>
+      <td><a id="paste_as_last_child">(Coller) Le dernier nœud enfant</a></td>
+      <td>Colle le contenu du presse-papiers dans le document en tant que dernier enfant de ce nœud.</td>
+    </tr>
+    <tr>
+      <td><a id="scroll_into_view">Faire défiler la vue jusqu'au nœud</a></td>
+      <td>
+        <p>Fait défiler la page Web pour que le nœud sélectionné soit visible.</p>
+    
+        <p>À partir de Firefox 44, l'appui sur le raccourci clavier <kbd>S</kbd> permet également de faire défiler le nœud sélectionné en vue.</p>
+      </td>
+    </tr>
+    <tr>
+      <td><a id="screenshot_node">Prendre une capture du nœud</a></td>
+      <td>Prend une capture d'écran du nœud sélectionné, enregistrée dans votre répertoire de téléchargement. Voir <a href="/fr/docs/Tools/Taking_screenshots">Prendre des captures d'écran</a>.</td>
+    </tr>
+    <tr>
+      <td><a id="create_new_node">Créer un nouveau nœud</a></td>
+      <td>Crée un nouvel élément &lt;div&gt ; vide comme dernier enfant de l'élément actuellement sélectionné. Voir <a href="#inserting_new_nodes">Inserting new nodes</a>.</td>
+    </tr>
+    <tr>
+      <td><a id="duplicate_node">Dupliquer le nœud</a></td>
+      <td>Crée une copie de cet élément, et insérez la copie immédiatement après cet élément.</td>
+    </tr>
+    <tr>
+      <td><a id="delete_node">Supprimer le nœud</a></td>
+      <td>Supprime l'élément du DOM.</td>
+    </tr>
+    <tr>
+      <td><a id="attribute_add_attribute">(Attribut) Ajouter un attribut</a></td>
+      <td>Ajoute un attribut à l'élément.</td>
+    </tr>
+    <tr>
+      <td><a id="attribute_edit_attribute">(Attribut) Éditer l'attribut</a></td>
+      <td>(uniquement lorsqu'il est invoqué sur un attribut) Modifie l'attribut.</td>
+    </tr>
+    <tr>
+      <td><a id="attribute_remove_attribute">(Attribut) Supprimer l'attribut</a></td>
+      <td>(uniquement lorsqu'il est invoqué sur un attribut) Supprime l'attribut.</td>
+    </tr>
+    <tr>
+      <td><a id="open_link_in_new_tab">Ouvrir le lien dans un nouvel onglet</a></td>
+      <td>(uniquement lorsqu'il est invoqué sur un lien, tel qu'un attribut href) Ouvre l'élément lié dans un nouvel onglet.</td>
+    </tr>
+    <tr>
+      <td><a id="open_file_in_debugger">Ouvrir le fichier dans le débogueur</a></td>
+      <td>(uniquement lorsqu'il est invoqué sur un lien vers une source JS) Ouvre la source liée dans le débogueur.</td>
+    </tr>
+    <tr>
+      <td><a id="open_file_in_style-Editor">Ouvrir le fichier dans l'éditeur de style</a></td>
+      <td>(uniquement lorsqu'il est invoqué sur un lien vers une source CSS) Ouvre la source liée dans l'éditeur de style.</td>
+    </tr>
+    <tr>
+      <td><a id="copy_link_address">Copier l'adresse du lien</a></td>
+      <td>(uniquement lorsqu'il est invoqué sur une URL) Copie l'URL.</td>
+    </tr>
+    <tr>
+      <td><a id=":hover">(Changer de pseudo-classe) hover</a></td>
+      <td>Définit la pseudo-classe CSS <a href="/fr/docs/Web/CSS/:hover">:hover</a>.</td>
+    </tr>
+    <tr>
+      <td><a id=":active">(Changer de pseudo-classe) active</a></td>
+      <td>Définit la pseudo-classe CSS <a href="/fr/docs/Web/CSS/:active">:active</a>.</td>
+    </tr>
+    <tr>
+      <td><a id=":focus">(Changer de pseudo-classe) focus</a></td>
+      <td>Définit la pseudo-classe CSS <a href="/fr/docs/Web/CSS/:focus">:focus</a>.</td>
+    </tr>
+    <tr>
+      <td><a id="focus-visible">(Changer de pseudo-classe) focus-visible</a></td>
+      <td>Définit la pseudo-classe CSS <a href="/fr/docs/Web/CSS/:focus-visible">:focus-visible</a>.</td>
+    </tr>
+    <tr>
+      <td><a id="focus-within">(Changer de pseudo-classe) focus-within</a></td>
+      <td>Définit la pseudo-classe CSS <a href="/fr/docs/Web/CSS/:focus-within">:focus-within</a>.</td>
+    </tr>
+    <tr>
+      <td><a id="visited">(Changer de pseudo-classe) visited</a></td>
+      <td>Définit la pseudo-classe CSS <a href="/fr/docs/Web/CSS/:visited">:visited</a>.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Éditer_le_code_HTML"><a name="Editing_HTML">Éditer le code HTML</a></h2>
+<h2 id="editing_html">Éditer le code HTML</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>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><img alt="Modifier le HTML directement dans le panneau Inspecteur dans Firefox 57" src="edit_html.png" style="display: block; margin-left: auto; margin-right: auto;"></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>Vous pouvez y ajouter n'importe quel HTML : changer la balise de l'élément, modifier les éléments existants ou en ajouter de nouveaux. Dès que vous cliquez en dehors de la boîte, les modifications sont appliquées à la page.</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>
+<p>Lorsque vous modifiez du HTML, le menu contextuel que vous voyez est le menu normal pour travailler avec du texte modifiable :</p>
 
-<h3 id="Copier_coller">Copier coller</h3>
+<p><img alt="" src="editable-context-menu.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
 
-<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="copy_and_paste">Copier coller</h3>
 
-<h3 id="Glisser_déposer">Glisser déposer</h3>
+<p>Il est possible d'utiliser le <a href="#element_popup_menu">menu contextuel</a> pour copier des nœuds dans l'arbre HTML.</p>
 
-<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>
+<h3 id="drag_and_drop">Glisser déposer</h3>
 
-<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>
+<p>Il est possible de modifier l'HTML en déplaçant les nœuds 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>
 
-<h3 id="Insérer_de_nouveaux_noeuds">Insérer de nouveaux noeuds</h3>
-
-<div class="geckoVersionNote">Nouveau dans Firefox 48</div>
+<p>{{EmbedYouTube("oI-a035nfWk")}}</p>
 
-<p>À partir de Firefox 48, il y a une icône "+" en haut du panneau :</p>
+<p>Vous pouvez annuler le glisser-déposer en appuyant sur la touche <kbd>Echap</kbd>.</p>
 
-<p> </p>
+<h3 id="inserting_new_nodes">Insérer de nouveaux nœuds</h3>
 
-<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>Il y a une icône "+" en haut du panneau :</p>
 
-<p> </p>
+<p><img alt="" src="html_tree.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
 
-<p>Cliquer sur cette icône insère une balise <code><a href="/fr/docs/Web/HTML/Element/div">&lt;div&gt;</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>Cliquer sur cette icône insère une balise <code><a href="/fr/docs/Web/HTML/Element/div">&lt;div&gt;</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 nœud, 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>L'option "Créer un nouveau nœud" 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">&lt;html&gt;</a></code> ou un <code><a href="/fr/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <code>&lt;div&gt;</code>, ( <code><a href="/fr/docs/Web/HTML/Element/style">&lt;style&gt;</a></code> ou <code><a href="/fr/docs/Web/HTML/Element/link">&lt;link&gt;</a></code> par exemple). Dans ces cas, l'élément ajouté est un texte.</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">&lt;html&gt;</a></code> ou un <code><a href="/fr/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <code>&lt;div&gt;</code>, (<code><a href="/fr/docs/Web/HTML/Element/style">&lt;style&gt;</a></code> ou <code><a href="/fr/docs/Web/HTML/Element/link">&lt;link&gt;</a></code> par exemple). Dans ces cas, l'élément ajouté est un texte.</p>