MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Éxaminer et modifier le code HTML

Il est possible d’examiner et d'éditer le code HTML d'une page web dans le panneau 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 :

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

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

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

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.

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

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.

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 parcourir les résultats, il faut utiliser Enter . Depuis Firefox 48, il est possible d'itérer à l'envers avec  Maj + Enter .

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 tous 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 en transparence dans l'arbre (tout comme les noeuds qui ne sont pas affichés comme <head> par exemple).

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.

Avant Firefox 53, il était impossible de déterminer si noeud réduit avait des enfants. Maintenant, ce cas, est indiqué par une icone de points de suspension ( )

::before et ::after

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

Noeuds ne contenant que des espaces

Nouveauté de Firefox 52

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.

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 aucune margin ou padding n'est appliqué sur ces éléments.

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 :

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

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 :

Référence du menu contextuel

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 CSS Copie un sélecteur CSS qui sélectionne uniquement l'élément.
Copier >> le chemin CSS Copie 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 HTML Colle le contenu du presse-papier dans le nœud en tant qu'outerHTML.
Coller >> Avant Colle le contenu du presse-papier dans le document immédiatement avant le nœud sélectionné.
Coller >> Après Colle le contenu du presse-papier dans le document immédiatement après le nœud sélectionné.
Coller >> Comme premier nœud enfant 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 Colle 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 noeud Prend 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 noeud Cré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œud Supprime 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'attribut Copie 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
: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

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

Copier coller

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

Glisser déposer

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.

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

Insérer de nouveaux noeuds

Nouveau dans Firefox 48

À partir de Firefox 48, 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.

L'option "Créer un nouveau noeud" 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.

Étiquettes et contributeurs liés au document

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