From 713bd8ae2bc76e8b85af57b77711c6414c9ffee9 Mon Sep 17 00:00:00 2001 From: A-d-r-i Date: Sat, 15 May 2021 16:08:14 +0200 Subject: 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 --- .../how_to/examine_and_edit_html/index.html | 597 ++++++++++++--------- 1 file changed, 354 insertions(+), 243 deletions(-) (limited to 'files/fr') 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 ---
{{ToolsSidebar}}
-

Il est possible d’examiner et d'éditer le code HTML d'une page grâce au panneau HTML.

+

Il est possible d'examiner et d'éditer le code HTML d'une page grâce au panneau HTML.

- + -

Fil d'Ariane HTML

+

Fil d'Ariane HTML

-

En bas du panneau HTML, se trouve un fil d'Ariane. Ce fil affiche l'a hiérarchie complète de l'élément sélectionné dans la page :

+

En bas du panneau HTML, se trouve un fil d'Ariane (« Breadcrumbs » en Anglais). Ce fil affiche l'a hiérarchie complète de l'élément sélectionné dans la page :

-

+

Survoler un élément du fil mettra celui-ci en surbrillance dans la page.

-

Le fil possède ses propres raccourcis clavier.

+

Le fil possède ses propres raccourcis clavier.

-
-

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.

-
+

Recherche

+ +

Le champ de recherche de l'inspecteur de page correspond à toutes les balises du document actuel et de tous les cadres.

+ +

Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F, ou Cmd + F 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.

+ +

Recherche en texte intégral

+ +

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.

-

Recherche

+ -

À 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.

+

Vous pouvez rechercher des éléments en saisissant un sélecteur CSS.

-

Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F , ou Cmd + F sous Mac.

+

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 :

-

Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID  qui correspondent à la recherche en cours :

+

-

+

Appuyez sur Haut et Bas pour faire défiler les suggestions, Tab pour choisir la suggestion actuelle, puis Entrer pour sélectionner le premier nœud avec cet attribut.

-

Pour itérer parmi les suggestions, il faut utiliser Flèche Haut et Flèche Bas. Tab permet de choisir la suggestion sélectionnée. Entrée permet alors de sélectionner le premier noeud correspondant.

+
{{EmbedYouTube("AKBhnfp1Opo")}} -

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.

+

Pour faire défiler les correspondances, appuyez sur Entrer. Vous pouvez revenir en arrière en utilisant Maj + Entrer.

-

{{EmbedYouTube("AKBhnfp1Opo")}}

+ -

Pour parcourir les résultats, il faut utiliser Enter . Depuis Firefox 48, il est possible d'itérer à l'envers avec  Maj + Enter .

+

Il est également possible d'effectuer une recherche via XPaths. Cela vous permet de rechercher des éléments spécifiques sans le conflit des mots correspondants dans le texte. Par exemple, //a correspond à tous les éléments <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.

-

Arbre HTML

+

Correspondance d'une recherche d'inspecteur utilisant une expression XPath

-

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.

+

Arbre HTML

-

The new Firefox 57 inspector HTML tree.Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.

+

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.

-

Les nœuds qui ne sont pas visibles (par exemple avec display:none) sont affichés en transparence dans l'arbre.

+

Le nouvel inspecteur HTML de Firefox 57

-

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.

+

Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.

-

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 ( )

+

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 display: none ou que l'élément n'a pas de dimensions.

+ +

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 :

+ +

Des marqueurs (« badges ») sont affichés à droite de certains nœuds. Le tableau ci-dessous explique la signification de chaque badge :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
eventL'é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 Debugger où l'écouteur est défini.
scrollL'élément est un conteneur de défilement, c'est-à-dire qu'il a soit overflow: scroll appliqué, soit overflow: auto et un contenu suffisant pour provoquer un débordement avec défilement.
+
+ Si la préférence devtools.overflow.debugging.enabled est définie sur true, le basculement du badge scroll mettra en évidence tous les éléments causant le débordement, et ces nœuds afficheront en plus le badge overflow.
overflowL'élément provoque un débordement avec défilement dans un conteneur de défilement (soit le nœud actuel ou un nœud parent — le nœud affecté affichera le badge scroll). +
+

Note :

+

Le badge overflow est introduit dans Firefox 83. Dans les versions antérieures, il peut être activé en utilisant la préférence devtools.overflow.debugging.enabled définie sur true.

+
+
gridL'élément est un conteneur de grille, c-à-d. qu'on lui a appliqué display: grid. En cliquant sur le marqueur, on active le surligneur de grille.
flexL'élément est un conteneur flexible, c-à-d. qu'on lui a appliqué display: flex. En cliquant sur le marqueur, vous activez le surligneur de flexbox.
inline-gridL'élément est un conteneur de grille en ligne, c-a-d. qu'il a display: inline-grid ou display: inline grid qui lui est appliqué. En cliquant sur le marqueur, vous activez le surligneur de grille.
inline-flexL'élément est un conteneur inline flex, c'est-à-dire qu'il a display: inline-flex ou display: inline flex qui lui est appliqué. En cliquant sur le marqueur, vous activez le surligneur de flexbox.
personnalisé...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.
-
-

Note: Il existe des raccourcis clavier fort pratiques qui peuvent être utilisés dans l'arbre HTML : voir la liste des raccourcis clavier.

+
+

Note :

+

Il existe des raccourcis clavier utiles qui peuvent être utilisés dans l'arborescence HTML — voir la liste des raccourcis clavier du volet HTML.

-

::before et ::after

+

::before et ::after

-

Depuis Firefox 35, il est possible d'inspecter les pseudo éléments ajoutés en utilisant {{cssxref("::before")}} et {{cssxref("::after")}} :

+

Vous pouvez inspecter les pseudo-éléments ajoutés à l'aide de ::before et ::after :

{{EmbedYouTube("ecfqTGvzsNc")}}

-

Noeuds ne contenant que des espaces

+

Définition d'un élément personnalisé

-
Nouveauté de Firefox 52
+

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 :

-

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.

+
    +
  1. Inspecter l'élément
    2. +
  2. Cliquez sur le mot personnalisé.
    3. +
-

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).

+

-

Si ces noeuds autogénérés sont des éléments "en ligne" (inline level), 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.

+

La source de la classe de l'élément sera affichée dans le débogueur.

-

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:  et affichent une infobulle explicative au survol :

+

-

+

Nœuds de texte avec espaces blancs uniquement

-

Il est possible de trouver une démonstration de ceci à l'adresse : https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

+

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.

-

Shadow roots

+

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).

-

Tous les noeuds shadow roots présents dans le DOM sont exposés par la page HTML, de la même manière que le DOM normal. Le shadow root est représenté par un noeud nommé #shadow-root — il est possible de cliquer sur la flèche d'expansion pour voir le contenu complet du shadow DOM, 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 shadow DOM.

+

Si ces nœuds de texte générés automatiquement sont des éléments en ligne et les boîtes en ligne, 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.

-

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+

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 : et vous obtenez une info-bulle explicative lorsque vous les survolez :

-

Si un shadow DOM contient un élément avec attribut slot ayant été inspiré dans un élément {{htmlelement("slot")}} — voir Flexibilitée ajoutée par les slots 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 slot tel qu'il existe en dehors du shadow DOM

+

-

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+

Pour voir cela en action, voyez la démo à l'adresse suivante https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

-

Cette fonctionnalité est utile pour trouver la source du contenu d'un élément <slot>

+

Racines fantômes

-
-

Note: L'inspection du Shadow DOM à été implémenté dans Firefox 61, mais est actuellement caché par la préférence dom.webcomponents.shadowdom.enabled. Elle sera activée par défaut lorsque les Web components/Shadow DOM seront disponible dans la plateforme, l'estimation actuelle pour cela est Firefox 63.

-
+

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é #shadow-root — 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).

+ +

Une vue d'une racine fantôme affichée à l'intérieur de l'arbre DOM dans les DevTools de Firefox

- +

Si un DOM fantôme contient un élément « slotted » (un élément avec un attribut slot après avoir été inséré à l'intérieur d'un élément <slot> — voir l'utilisation des templates et des slots pour une explication de leur utilisation), l'élément « slotté » sera affiché à l'intérieur de l'élément <slot> correspondant, avec un lien « reveal » à côté. En cliquant sur le lien « reveal », l'élément avec l'attribut slot sera mis en évidence tel qu'il existe en dehors du DOM fantôme.

-

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 :

+

Une vue d'une racine fantôme affichée à l'intérieur de l'arbre DOM dans les DevTools de Firefox

-

+

C'est très utile lorsque vous avez un élément <slot> et que vous ne pouvez pas trouver la source de son contenu.

+ +
+

Note :

+

L'inspection Shadow DOM a été implémentée dans Firefox 61, mais était cachée derrière le préfixe dom.webcomponents.shadowdom.enabled jusqu'à Firefox 63. Elle est maintenant activée par défaut.

+
-

Référence du menu contextuel

+

Menu contextuel de l'élément

+ +

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 Référence du menu contextuel :

+ + + +

* 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.

+ +

Référence du menu contextuel

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Modifier comme HTMLModifie le code HTML de l'élément.
Copier >> l’intérieur du HTMLCopie le contenu interne à l'élément HTML
Copier >> l’extérieur du HTMLCopie le contenu HTML à l'intérieur par rapport à l'élément courant en incluant la balise de l'élément courant
Copier >> le sélecteur CSSCopie un sélecteur CSS qui sélectionne uniquement l'élément.
Copier >> le chemin CSSCopie un sélecteur CSS qui représente le chemin complet vers l'élément
-

Copier >> le Data-URL de l'image

- 		Copie l'image en tant que data:// URL, si l'élément sélectionné est une image.
Afficher les propriétés DOM -

Ouvre la console scindée et entre la commande "inspect($0)" pour inspecter l'élément actuellement sélectionné.

-
Utiliser dans la console -
-

Nouveau dans Firefox 43

-
- -

Assigne le noeud actuellement sélectionné dans une variable nommée temp0 (ou temp1 si temp0 est déjà utilisée, etc.), puis ouvre la console scindée, vous permettant d'interagir avec ce noeud depuis la ligne de commande.

-
Tout étendre -
-

Nouveau dans Firefox 44

-
- Étend l'élément sélectionné ainsi que tous ses enfants dans l'arbre HTML. C'est l'équivalent d'utiliser la touche Alt  et le bouton pour étendre un élément (le triangle en début de ligne)
Réduire -
-

Nouveau dans Firefox 44

-
- Réduit l'élément sélectionné. C'est l'équivalent du bouton en forme de triangle en début de ligne.
Coller >> à l’intérieur du HTML -

Colle le contenu du presse-papier dans le nœud en tant qu'innerHTML.

-
Coller >> à l’extérieur du HTMLColle le contenu du presse-papier dans le nœud en tant qu'outerHTML.
Coller >> AvantColle le contenu du presse-papier dans le document immédiatement avant le nœud sélectionné.
Coller >> AprèsColle le contenu du presse-papier dans le document immédiatement après le nœud sélectionné.
Coller >> Comme premier nœud enfantColle le contenu du presse-papier dans le document en tant que premier enfant du nœud sélectionné.
Coller >> Comme dernier nœud enfantColle le contenu du presse-papier dans le document en tant que dernier enfant du nœud sélectionné.
Faire défiler la vue jusqu'au noeud -

Fait défiler la page jusqu'a ce que le noeud sélectionné soit visible.

- -

À partir de Firefox 44, il est possible d'utiliser le raccourci clavier S fera la même action.

-
Prendre une capture du noeudPrend une capture du noeud sélectionné. La capture est directement sauvegardée dans votre dossier de téléchargement. Voir Prendre des captures.
Créer un nouveau noeudCrée une balise <div> en dernier enfant de l'élément sélectionné. Voir Insérer des nouveaux noeuds.
Dupliquer le noeud -
-

Nouveau dans Firefox 44

-
- Crée une copie de l'élément sélectionné, et l'insère immédiatement après.
Supprimer le nœudSupprime l'élément
Attributs >> Ajouter un attribut -
-

Nouveau dans Firefox 44

-
- Ajoute un attribut à l'élément.
Attributs >> Modifier l'attribut -
-

Nouveau dans Firefox 44

-
- (seulement quand un attribut est sélectionné) Modifie l'attribut.
Attributs >> Supprimer l'attribut -
-

Nouveau dans Firefox 44

-
- (seulement quand un attribut est sélectionné) Supprime l'attribut.
Attributs >> Copier la valeur de l'attributCopie la valeur de l'attribut
Ouvrir le lien dans un nouvel onglet(seulement quand un lien - comme un attribut href - est sélectionné) Ouvre l'élément dans un nouvel onglet.
Ouvrir dans le Débogueur(seulement quand un lien vers une source JS est sélectionné) Ouvre la source dans le Débogueur.
Ouvrir fichier dans l'éditeur de style(seulement quand un lien vers une source CSS est sélectionné) Ouvre la source dan l'éditeur de style.
Copier l'adresse du lien(seulement quand une URL est sélectionnée) Copie l'URL
:hoverDéfinit la pseudo classe CSS :hover
:activeDéfinit la pseudo classe CSS :active
:focusDéfinit la pseudo classe CSS :focus
Modifier comme HTMLModifie le HTML de l'élément.
(Copier) L'intérieur du HTMLCopie le code HTML interne de l'élément.
(Copier) L'extérieur du HTML +

Copie le HTML externe de l'élément.

+ +

Appuyer sur Ctrl + C (ou Cmd + C sur un Mac) effectue également cette action.

+
(Copier) Sélecteur unique/Sélecteur CSSCopie un sélecteur CSS qui sélectionne l'élément de manière unique.
(Copier) Le chemin CSSCopie un sélecteur CSS qui représente le chemin d'accès complet à l'élément.
(Copier) L'image en tant que Data-URLCopie l'image sous forme d'URL data://, si l'élément sélectionné est une image.
(Copier) L'attributCopie l'attribut de l'élément.
Afficher les propriétés DOMOuvre la Console Web et entre la commande de console « inspect($0) » pour inspecter l'élément actuellement sélectionné.
Ouvrir dans la consoleAffecte le nœud actuellement sélectionné à une variable nommée temp0 (ou temp1 si temp0 est déjà pris, et ainsi de suite), puis ouvre la Console Web, vous permettant d'interagir avec ce nœud en utilisant la ligne de commande de la console.
Tout développerDans l'arborescence, développe l'élément actuel et tous les éléments qui se trouvent sous lui. Cela équivaut à maintenir la touche Alt et à cliquer sur le triangle de divulgation à côté d'un élément.
Tout réduireDans 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é.
(Coller) L'intérieur du HTMLColle le contenu du presse-papiers dans le nœud en tant que son innerHTML.
(Coller) L'extérieur du HTMLColle le contenu du presse-papiers dans le nœud en tant que son outerHTML.
(Coller) AvantColle le contenu du presse-papiers dans le document situé immédiatement avant ce nœud.
(Coller) AprèsColle le contenu du presse-papiers dans le document immédiatement après ce nœud.
(Coller) Le premier nœud enfantColle le contenu du presse-papiers dans le document en tant que premier enfant de ce nœud.
(Coller) Le dernier nœud enfantColle le contenu du presse-papiers dans le document en tant que dernier enfant de ce nœud.
Faire défiler la vue jusqu'au nœud +

Fait défiler la page Web pour que le nœud sélectionné soit visible.

+ +

À partir de Firefox 44, l'appui sur le raccourci clavier S permet également de faire défiler le nœud sélectionné en vue.

+
Prendre une capture du nœudPrend une capture d'écran du nœud sélectionné, enregistrée dans votre répertoire de téléchargement. Voir Prendre des captures d'écran.
Créer un nouveau nœudCrée un nouvel élément <div> ; vide comme dernier enfant de l'élément actuellement sélectionné. Voir Inserting new nodes.
Dupliquer le nœudCrée une copie de cet élément, et insérez la copie immédiatement après cet élément.
Supprimer le nœudSupprime l'élément du DOM.
(Attribut) Ajouter un attributAjoute un attribut à l'élément.
(Attribut) Éditer l'attribut(uniquement lorsqu'il est invoqué sur un attribut) Modifie l'attribut.
(Attribut) Supprimer l'attribut(uniquement lorsqu'il est invoqué sur un attribut) Supprime l'attribut.
Ouvrir le lien dans un nouvel onglet(uniquement lorsqu'il est invoqué sur un lien, tel qu'un attribut href) Ouvre l'élément lié dans un nouvel onglet.
Ouvrir le fichier dans le débogueur(uniquement lorsqu'il est invoqué sur un lien vers une source JS) Ouvre la source liée dans le débogueur.
Ouvrir le fichier dans l'éditeur de style(uniquement lorsqu'il est invoqué sur un lien vers une source CSS) Ouvre la source liée dans l'éditeur de style.
Copier l'adresse du lien(uniquement lorsqu'il est invoqué sur une URL) Copie l'URL.
(Changer de pseudo-classe) hoverDéfinit la pseudo-classe CSS :hover.
(Changer de pseudo-classe) activeDéfinit la pseudo-classe CSS :active.
(Changer de pseudo-classe) focusDéfinit la pseudo-classe CSS :focus.
(Changer de pseudo-classe) focus-visibleDéfinit la pseudo-classe CSS :focus-visible.
(Changer de pseudo-classe) focus-withinDéfinit la pseudo-classe CSS :focus-within.
(Changer de pseudo-classe) visitedDéfinit la pseudo-classe CSS :visited.
-

Éditer le code HTML

+

Éditer le code HTML

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.

-

Pour éditer le outerHTML, il faut ouvrir le menu contextuel et sélectionner "Modifier comme HTML" . Une boite apparaîtra alors dans le panneau HTML :

+

Pour éditer le outerHTML, il faut ouvrir le menu contextuel et sélectionner "Modifier comme HTML". Une boite apparaîtra alors dans le panneau HTML :

-

Edit HTML directly in the Inspector panel in Firefox 57N'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

+

Modifier le HTML directement dans le panneau Inspecteur dans Firefox 57

-

À partir de Firefox 52, lors de l'édition, le menu contextuel est le même que pour le texte modifiable normal :

+

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.

-

+

Lorsque vous modifiez du HTML, le menu contextuel que vous voyez est le menu normal pour travailler avec du texte modifiable :

-

Copier coller

+

-

Il est possible d'utiliser le menu popup pour copier des noeuds dans l'arbre HTML.

+

Copier coller

-

Glisser déposer

+

Il est possible d'utiliser le menu contextuel pour copier des nœuds dans l'arbre HTML.

-

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.

+

Glisser déposer

-

{{EmbedYouTube("oI-a035nfWk")}}

- -

À partir de Firefox 44, il est possible d'annuler le glisser-déposer en utilisant la touche Esc.

+

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.

-

Insérer de nouveaux noeuds

- -
Nouveau dans Firefox 48
+

{{EmbedYouTube("oI-a035nfWk")}}

-

À partir de Firefox 48, il y a une icône "+" en haut du panneau :

+

Vous pouvez annuler le glisser-déposer en appuyant sur la touche Echap.

-

 

+

Insérer de nouveaux nœuds

-

+

Il y a une icône "+" en haut du panneau :

-

 

+

-

Cliquer sur cette icône insère une balise <div> 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.

+

Cliquer sur cette icône insère une balise <div> 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.

{{EmbedYouTube("NG5daffvVZM")}}

-

L'option "Créer un nouveau noeud" dans le menu contextuel fait la même chose.

+

L'option "Créer un nouveau nœud" dans le menu contextuel fait la même chose.

-

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 <html> ou un <iframe>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <div>, ( <style> ou <link> par exemple). Dans ces cas, l'élément ajouté est un texte.

+

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 <html> ou un <iframe>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <div>, (<style> ou <link> par exemple). Dans ces cas, l'élément ajouté est un texte.

-- cgit v1.2.3-54-g00ecf