Comment se servir de l'option Examiner l'élément dans Mozilla Firefox

Télécharger l'article
Télécharger l'article

L'outil pour développeurs « Examiner l'élément » présent dans Firefox vous permet de retrouver précisément le code HTML de n'importe quelle chose que vous voyez sur vote page web. Le code HTML et la feuille de styles CSS attachée sont totalement éditables une fois que ces outils sont utilisés. Testez-les en faisant toutes les modifications que vous voulez, puis rafraichissez la page pour revenir à l'apparence originale de la page web.

Partie 1
Partie 1 sur 2:

Inspecter des éléments

Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Vous n'aurez peut-être pas accès à toutes les fonctionnalités mentionnées ici si vous disposez d'une ancienne version de Firefox. Vérifier quelle version de Firefox vous avez fera se lancer automatiquement le téléchargement de la dernière mise à jour.
    • Firefox 9 et les versions plus anciennes ne disposent pas de l'outil Examiner l'élément.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Vous pouvez faire un clic droit sur des images, du texte, des fonds d'écran ou tout autre élément. Si vous avez une souris qui n'a pas deux boutons, faites un clic gauche tout en maintenant Ctrl .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Une barre d'outils devrait apparaitre en bas de votre fenêtre. Un panneau fera également son apparition en dessous de cette barre d'outils, affichant le code HTML de la page.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Quand vous sélectionnez Examiner l'élément, plusieurs panneaux s'ouvriront en bas de votre fenêtre. Voici une explication détaillée de leurs noms et utilités  [1] .
    • La ligne du haut est la barre d'outils « Boite à outils ». Vous y trouverez plusieurs outils pour développeurs, mais nous allons nous intéresser davantage à l'onglet Inspecteur sur la gauche. Laissez celui-ci en sélection (avec une surbrillance bleue) durant toute la durée de ce guide.
    • Sous cette barre d'outils, se trouve une ligne unique d'éléments HTML nommée « Breadcrumbs », qui vous montre le chemin entier correspondant à l'élément sélectionné.
    • Le panneau sous cette ligne montre l'arbre HTML, aussi appelé la « vue balise », de la page. Le code HTML de l'élément que vous avez sélectionné est mis en surbrillance et centré dans ce panneau.
    • Le panneau sur la droite affiche la feuille de styles CSS correspondants à cette page.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Une fois la barre d'outils ouverte, il est facile de sélectionner un autre élément. Voici trois manières de le faire.
    • Survolez une ligne de code HTML pour mettre en surbrillance l'élément correspondant (il vous faudra Firefox 34+  [2] ). Faites un clic sur le code HTML pour sélectionner cet élément.
    • Faites un clic sur la fonction Sélectionner un élément de la page située tout à gauche de la barre d'outils : l'icône est un curseur par-dessus un carré. Déplacez votre curseur sur la page pour mettre des éléments en surbrillance et cliquez ensuite pour sélectionner un élément.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Faites un clic n'importe où dans le panneau HTML. Servez-vous des flèches gauche et droite sur votre clavier pour vous déplacer dans le code (cela nécessite Firefox 39+  [3] ). Cela vous sera utile pour les éléments trop petits à sélectionner manuellement.
    • Le code HTML en gris correspond aux éléments qui ne sont pas affichés sur la page. Parmi eux, il y a les commentaires, certaines balises comme <head> et des éléments qui ont été cachés par la configuration d'affichage CSS  [4] .
    • Sélectionnez la flèche sur la gauche des paragraphes de lignes de code pour faire afficher ou non leur contenu. Pour faire afficher toutes les lignes de code, appuyez sur Alt ou option tout en cliquant  [5] .
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/62\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/62\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Trouvez la barre de recherche (icône de loupe) tout à droite de la ligne Breadcrumbs. Cliquez dessus pour la faire s'agrandir, puis entrez-y la portion de code HTML recherchée. Pendant que vous tapez, une petite fenêtre apparaitra contenant une liste des éléments qui correspondent à votre requête. Sélectionnez un élément en cliquant dessus et allez voir son code dans le panneau HTML.
    Publicité
Partie 2
Partie 2 sur 2:

Éditer le code HTML

Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ee\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ee\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si les outils de développement web sont nouveaux pour vous, sachez qu'ils ne vous permettent pas de faire des changements permanents. Vos modifications ne seront visibles que sur votre écran et seulement jusqu'à ce que vous fermiez la page ou si vous l'actualisez. N'hésitez pas à faire des expériences même si vous n'êtes pas sûr de ce qu'il va se passer.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Faites un doubleclic sur une ligne de code HTML. Tapez le nouveau texte puis appuyez sur Entrée pour enregistrer vos modifications.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/aa\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/aa\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Souvenez-vous, la barre d'outils Breadcrumbs se situe entre l'arbre HTML complet et la barre d'outils du haut. Maintenez le clic enfoncé sur l'un des éléments de cette ligne pour ouvrir un menu étendu. Voici un guide non exhaustif de ces options  [6] .
    • « Modifier comme HTML » rend éditable la balise et tout ce qu'elle contient dans l'arbre HTML, plutôt que d'éditer chaque ligne individuellement.
    • « Copier l'intérieur du HTML » copie tout le contenu de la balise, alors que « Copier l'extérieur du HTML » copie aussi la balise (comme <div> ou <body>).
    • « Coller... » vous mène vers plusieurs options pour l'emplacement où coller, comme avant la balise ou après la première balise-fille.
    • : hover, : active et : focus modifient l'apparence qu'a l'élément quand l'utilisateur interagit avec. L'effet exact est déterminé par la feuille de styles CSS (modifiable dans le panneau de droite).
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/44\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/44\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Pour modifier l'arrangement des éléments du code, maintenez le clic enfoncé sur le code HTML jusqu'à ce qu'une ligne pointillée apparaisse. Allez en haut ou en bas de l'arbre et lâchez le clic quand la ligne pointillée est au bon endroit.
    • Il vous faudra Firefox 39 ou une version postérieure pour cela  [7] .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Pour fermer toutes ces fenêtres farfelues, appuyez simplement sur le X dans le coin tout à droite de la barre d'outils, au-dessus du panneau CSS.
    Publicité

Conseils

  • Vous pouvez ouvrir la barre d'outils avec ces options situées dans le menu du haut [8] .

    • Windows :
      Firefox → Développement → Outils de développement
    • Mac ou Linux :
      Outils → Développement → Outils de développement
  • Firefox 40 a introduit l'option de cacher le panneau CSS afin d'avoir plus d'espace quand vous modifiez le code HTML  [9] . Cherchez l'icône en forme de flèche tout à droite de la ligne Breadcrumbs, à droite de la barre de recherche. Sélectionnez cette icône pour cacher le panneau CSS et cliquez dessus à nouveau pour le faire s'agrandir.
  • Le panneau CSS est également modifiable, mais cela va au-delà du périmètre de ce guide. cet article vous enseigne les bases du CSS.
Publicité

wikiHows en relation

Comment
bloquer des sites sur Firefox
Comment
bloquer et débloquer des sites Internet avec Firefox
Comment
accélérer Firefox
Comment
activer Javascript dans Mozilla Firefox
Comment
vider le cache dans Firefox
Comment
démarrer Firefox en Mode sans échec
Comment
exporter les favoris à partir de Firefox
Comment
entrer des paramètres de proxy dans Firefox
Comment
organiser les marque‐pages de Firefox
Comment
bloquer les fenêtres popup dans Firefox
Comment
désinstaller Firefox
Comment
utiliser Tor avec Firefox
Comment
réinitialiser Firefox
Comment
activer Java dans Firefox
Publicité

Références

  1. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour
  2. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  3. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
  4. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  5. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  6. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  7. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  8. ↑ https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
  9. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour

À propos de ce wikiHow

Autres langues 
Cette page a été consultée 16 127 fois.

Cet article vous a-t-il été utile ?

Publicité