Examiner et éditer le code HTML

Il est possible d’examiner et d'éditer le code HTML d'une page web dans le panneau HTML.

En haut du panneau HTML se trouve une barre d'outils divisée en deux parties : un fil d'Ariane et une boite de recherche.

Fil d'Ariane HTML

Cette partie de la barre montre la la hiérarchie complète de la branche contenant l'élément sélectionné :

Rester appuyé sur un élément du fil fera apparaître un menu contextuel qui permet entre autres choses de sélectionner des éléments frères. Cliquer sur une des petites icônes en forme de flèche sur les extrémités du fil d’Ariane ferra défiler la barre si celle-ci est plus grande que l'espace alloué.

Depuis Firefox 34, survoler un élément du fil mettra celui-ci en surbrillance dans la page.

Boîte de recherche

Cliquer sur la boite de recherche l'agrandira, il est alors possible de taper le nom d'une balise. le premier élément de ce type sera alors sélectionné et presser Entrée sélectionnera le suivant. La boite de recherche attend une chaîne de caractères correspondant à un sélecteur CSS. Ainsi, il est possible de rechercher un élément ayant l'ID "monID" en tapant "#monID".

Arbre HTML

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 tout les nœuds inclus dans l'élément.

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

Les nœuds qui sont cachés en utilisant display:none sont affichés grisés.

::before et ::after

Depuis Firefox 35, il est possible d'inspecter les pseudo éléments ajoutés en utilisant ::before et::after:

Il est possible d’effectuer des tâches courantes sur un spécifique grave au menu contextuel. Pour ouvrir celui ci, il suffit de faire un clic droit sur l'élément :

Ce menu permet d’effectuer les tâches suivants :

Modifier comme HTML Modifie le code HTML de l'élément.
Copier l’intérieur du HTML Copie le contenu interne à l'élément HTML
Copier l’extérieur du HTML Copie 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 unique Copie un sélecteur CSS qui sélection uniquement l'élément.
Copie 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

Nouveau dans Firefox 35

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

Coller à l’intérieur du HTML

Nouveau dans Firefox 36

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

Coller à l’extérieur du HTML Colle le contenu du presse-papier dans le nœud en tant qu'outerHTML.
Coller/Avant

Nouveau dans Firefox 36

Colle le contenu du presse-papier dans le document immédiatement avant le nœud sélectionné.
Coller/Après

Nouveau dans Firefox 36

Colle le contenu du presse-papier dans le document immédiatement après le nœud sélectionné.
Coller/Comme premier nœud enfant

Nouveau dans Firefox 36

Colle le contenu du presse-papier dans le document en tant que premier enfant du nœud sélectionné.
Coller/Comme dernier nœud enfant

Nouveau dans Firefox 36

Colle le contenu du presse-papier dans le document en tant que dernier enfant du nœud sélectionné.
Supprimer le nœud Supprime l'élément
:hover Définit la pseudo classe CSS :hover
:active Définit la pseudo classe CSS :active
:focus Définit la pseudo classe CSS :focus

É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 :

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.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : maximelore, teoli, micetf, SphinxKnight, Goofy
 Dernière mise à jour par : maximelore,