Il est possible d’examiner et d'éditer le code HTML d'une page web dans le panneau HTML.
Naviguer dans le 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:
Menu contextuel
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" |
| 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 |
| Coller/Après |
Nouveau dans Firefox 36 |
| Coller/Comme premier nœud enfant |
Nouveau dans Firefox 36 |
| Coller/Comme dernier nœud enfant |
Nouveau dans Firefox 36 |
| 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.