L'outil de développement Inspect Element de Firefox vous permet de localiser le code HTML de tout ce que vous voyez sur votre page Web. Le HTML et la feuille de style CSS qui l'accompagne sont entièrement modifiables une fois ces outils ouverts. Expérimentez avec toutes les modifications que vous souhaitez, puis actualisez la page pour revenir à l'apparence prévue de la page Web.
Pas
Partie 1 sur 2: Inspection des éléments
Étape 1. Cliquez avec le bouton droit sur n'importe quel élément de page Web
Vous pouvez cliquer avec le bouton droit sur les images, le texte, les arrière-plans ou tout autre élément. Si vous n'avez pas de souris à deux boutons, faites un clic gauche tout en maintenant Control.
Étape 2. Cliquez sur Inspecter l'élément dans le menu déroulant
Une barre d'outils devrait apparaître en bas de votre fenêtre. Un volet apparaîtra également sous la barre d'outils, affichant le code HTML de la page.
Étape 3. Identifiez les barres d'outils et les volets
Lorsque vous cliquez sur Inspecter l'élément, plusieurs volets s'ouvrent en bas de votre fenêtre. Voici une ventilation de leurs utilisations et noms:
- La rangée supérieure est la barre d'outils de la boîte à outils. Cela a plusieurs outils de développement, mais nous nous intéressons à Inspector sur la gauche. Gardez cette option sélectionnée (surlignée en bleu) pour l'ensemble de ce guide.
- Sous la barre d'outils, il y a une seule ligne Breadcrumbs d'éléments HTML, montrant le chemin complet relatif à l'élément sélectionné.
- Le volet situé sous cette ligne affiche l'arborescence HTML ou « Vue de balisage » de la page. Le code HTML de l'élément que vous avez sélectionné est mis en surbrillance et centré dans ce volet.
- Le volet de droite affiche la feuille de style CSS de cette page.
Étape 4. Sélectionnez un autre élément
Une fois la barre d'outils ouverte, il est facile de sélectionner un autre élément. Voici trois façons de procéder:
- Survolez une ligne HTML pour mettre en évidence l'élément correspondant (nécessite Firefox 34+). Cliquez sur le code HTML pour sélectionner cet élément.
- Cliquez sur l'outil Sélectionner un élément à l'extrême gauche de la barre d'outils: l'icône est un curseur sur un carré. Déplacez votre curseur sur la page pour mettre en surbrillance les éléments, puis cliquez pour sélectionner un élément.
Étape 5. Naviguez dans le code
Cliquez n'importe où dans le volet HTML. Utilisez les flèches gauche et droite de votre clavier pour vous déplacer dans le code (nécessite Firefox 39+). Ceci est utile pour les éléments trop petits pour être sélectionnés à la main.
- Le code HTML gris concerne les éléments non affichés sur la page. Cela inclut les commentaires, certains nœuds tels que, et les éléments qui ont été masqués avec la propriété d'affichage CSS.
- Cliquez sur la flèche à gauche des conteneurs pour développer ou masquer son contenu. Pour développer tout le contenu, maintenez alt=""Image" ou option tout en cliquant.</li" />
Étape 6. Recherchez un élément
Recherchez la barre de recherche (icône de loupe) à l'extrême droite de la ligne Breadcrumbs. Cliquez dessus pour le développer, puis saisissez le code HTML que vous recherchez. Au fur et à mesure que vous tapez, une fenêtre contextuelle apparaîtra répertoriant les éléments correspondants. Cliquez sur l'un pour sélectionner cet élément et faites défiler le volet HTML jusqu'à son code.
Partie 2 sur 2: Modification du HTML
Étape 1. Actualisez la page pour recommencer à tout moment
Si vous débutez avec les outils de développement Web, sachez qu'ils n'apportent aucune modification permanente. Vos modifications ne seront visibles que sur votre écran, et seulement jusqu'à ce que vous fermiez la page ou l'actualisiez. N'hésitez pas à expérimenter même si vous n'êtes pas sûr de ce qui va se passer.
Étape 2. Double-cliquez sur le code HTML pour modifier le texte
Double-cliquez sur une ligne de HTML. Saisissez le nouveau texte et appuyez sur Entrée pour enregistrer vos modifications.
Étape 3. Cliquez et maintenez un fil d'Ariane pour plus d'options
N'oubliez pas que la barre d'outils Breadcrumb est prise en sandwich entre l'arborescence HTML complète et la barre d'outils supérieure. Cliquez et maintenez sur l'un des éléments de cette ligne pour ouvrir un menu complet. Voici un guide incomplet de ces options:
- "Modifier en HTML" rend le nœud et tout son contenu modifiables dans l'arborescence HTML, au lieu d'avoir à modifier chaque ligne individuellement.
- "Copier le HTML interne" copie tout le contenu du nœud, tandis que "Copier le HTML externe" copie également le nœud (comme ou
- "Coller →" mène à plusieurs options pour savoir où coller, comme avant ce nœud ou après le premier enfant du nœud.
- :hover,:active et:focus modifient l'apparence de l'élément lorsque l'utilisateur interagit avec celui-ci. L'effet exact est déterminé par la feuille de style CSS (modifiable à partir du volet de droite).
Étape 4. Faites glisser et déposez
Pour réorganiser les éléments dans le code, cliquez et maintenez le code HTML jusqu'à ce qu'une ligne pointillée apparaisse. Déplacez-le vers le haut ou vers le bas de l'arbre et relâchez-le lorsque la ligne pointillée est à l'endroit souhaité.
Cela nécessite Firefox 39 ou une version ultérieure
Étape 5. Fermez la barre d'outils du développeur
Pour fermer toutes ces fenêtres sophistiquées, appuyez simplement sur le X dans le coin le plus à droite de la barre d'outils, au-dessus du volet CSS.
Des astuces
- Vous pouvez également ouvrir la barre d'outils avec ces options de menu du haut:
- Windows: Firefox → Développeur Web → Basculer les outils
- Mac ou Linux: Outils → Développeur Web → Basculer les outils
- Firefox 40 a introduit la possibilité de masquer le volet CSS pour vous donner plus d'espace lors de l'édition HTML. Recherchez l'icône de flèche à l'extrême droite de la ligne Breadcrumbs, à droite de la barre de recherche. Cliquez sur cette icône pour masquer le volet CSS, puis cliquez à nouveau dessus pour le développer à nouveau.
- Le volet CSS est également modifiable, mais cela dépasse le cadre de ce guide. Cet article enseigne les bases de CSS.
