"Inspecter l'élément" est un outil de développement dans le navigateur Firefox que vous pouvez utiliser pour suivre le code HTML sur n'importe quelle page Web. Les feuilles de style HTML et CSS d'une page Web peuvent être modifiées avec "Inspect Element". Vous pouvez essayer de modifier une page comme vous le souhaitez et la ramener à ce qu'elle était en rechargeant simplement la page Web modifiée.
Étape
Partie 1 sur 2: Vérification des éléments
Étape 1. Mettez à jour Firefox (facultatif)
Il est possible que vous ne puissiez pas accéder aux fonctionnalités décrites dans cet article si vous utilisez une ancienne version de Firefox. La mise à jour sera installée automatiquement lorsque vous vérifierez quelle version de Firefox vous utilisez.
Firefox 9 et les versions antérieures n'ont pas du tout l'outil "Inspecter l'élément"
Étape 2. Cliquez avec le bouton droit sur n'importe quel élément de page Web
Vous pouvez cliquer avec le bouton droit sur n'importe quelle image, texte, arrière-plan ou élément. Si votre souris n'a qu'un seul bouton, une combinaison d'un clic gauche et de la touche Ctrl se traduira par un clic droit.
Étape 3. Cliquez sur "Inspecter l'élément" dans le menu déroulant
Une barre d'outils apparaîtra en bas de la fenêtre. Un panneau sous la barre d'outils apparaîtra également et affichera le code HTML sur la page active.
Étape 4. Familiarisez-vous avec les barres d'outils et les panneaux existants
Lorsque vous utilisez "Inspecter l'élément", plusieurs panneaux s'ouvrent sous la fenêtre du navigateur. Ce qui suit décrit les noms et les fonctions des barres d'outils et des panneaux dans « Inspecter l'élément »:
- Sur la rangée supérieure se trouve la barre d'outils de la boîte à outils. Il y a plusieurs outils à trouver ici, mais nous allons nous concentrer sur le bouton Inspecteur sur la gauche. Assurez-vous que ce bouton est actif (indiqué par la couleur du bouton qui devient bleu lorsqu'il est actif) tout au long de ce guide.
- En dessous, il y a une ligne de fil d'Ariane des éléments HTML qui indique l'emplacement de l'élément actuellement sélectionné.
- Le volet sous les invites de navigation affiche l'arborescence HTML ou « Vue de balisage » de la page Web. Le code HTML de l'élément sélectionné sera marqué et centré dans ce volet.
- Le volet de droite affiche la feuille de style CSS de la page Web actuelle.
Étape 5. Sélectionnez un autre élément
Lorsque la barre d'outils est ouverte, vous pouvez facilement sélectionner d'autres éléments. Il y a trois façons de le faire:
- Survolez une ligne HTML pour marquer l'élément sélectionné (cette fonctionnalité nécessite Firefox 34+). Cliquez sur le code HTML pour sélectionner cet élément.
- Cliquez sur l'outil "Sélectionner un élément" dans le coin gauche de la barre d'outils: il a une icône en forme de curseur au-dessus d'une boîte. Déplacez le curseur sur la page Web pour marquer un élément et cliquez pour le sélectionner.
Étape 6. Tracez le code HTML
Cliquez n'importe où dans le volet HTML. Utilisez les touches directionnelles gauche et droite du clavier pour passer de code en code (cette fonctionnalité nécessite Firefox 39+). Cette méthode est utile pour sélectionner des éléments trop petits pour être sélectionnés avec le curseur.
- Le code HTML grisé indique les éléments qui ne sont pas affichés sur la page. Les éléments inclus dans ceci sont des commentaires, comme des nœuds, et d'autres éléments masqués par la propriété d'affichage CSS.
- Cliquez sur la flèche à gauche de la zone pour afficher ou masquer le contenu. Pour afficher l'intégralité du contenu, maintenez la touche alt=""Image" ou option enfoncée tout en cliquant sur la flèche.</li" />
Étape 7. Localisez l'élément
Recherchez le champ de recherche (icône en forme de boucle) dans le coin le plus à droite du fil d'Ariane. Cliquez pour développer le champ de recherche et saisissez le code HTML que vous souhaitez rechercher. Au fur et à mesure que vous tapez, une fenêtre contextuelle s'affichera indiquant les résultats de recherche correspondants. Cliquez sur un élément des résultats de la recherche et faites défiler le volet HTML jusqu'au code que vous recherchez.
Partie 2 sur 2: Édition HTML
Étape 1. Rechargez la page pour recommencer
Si vous débutez avec les outils de développement de sites Web, sachez que vous n'apportez pas de modifications permanentes aux pages que vous modifiez. Vos modifications n'apparaissent sur votre écran que jusqu'à ce que vous rechargez ou fermez la page. N'hésitez pas à expérimenter même si vous ne savez pas ce qui va se passer.
Étape 2. Double-cliquez sur le code HTML à modifier
Double-cliquez sur HTML en ligne. Tapez le nouveau texte et appuyez sur Entrée pour enregistrer les modifications.
Étape 3. Cliquez et maintenez l'outil dans le fil d'Ariane pour afficher plus d'options
Notez que la barre d'outils du fil d'Ariane se trouve entre l'arborescence HTML et la barre d'outils au-dessus. Cliquez et maintenez un outil dans cette ligne pour ouvrir plus de menus. Vous trouverez ci-dessous un aperçu des options disponibles (non exhaustif):
- "Modifier en HTML" vous permet de modifier directement tout le contenu HTML de l'arborescence HTML au lieu de modifier chaque ligne.
- "Copier le HTML interne" copie l'intégralité du contenu à l'intérieur du nœud, tandis que "Copier le HTML externe" copie le contenu et les nœuds (tels que ou
- "Coller →" affiche plusieurs options pour savoir où coller la copie, comme avant le 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. Les effets modifiés sont définis à partir de la feuille de style CSS (modifiable depuis le panneau 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 la ligne de haut en bas dans l'arborescence et relâchez le bouton de la souris lorsque la ligne est là où vous le souhaitez.
Cette fonctionnalité nécessite Firefox 39 et versions ultérieures
Étape 5. Fermez la barre d'outils du développeur
Pour fermer toute la fenêtre Inspecter l'élément, cliquez sur le bouton X dans le coin supérieur droit de la barre d'outils située au-dessus du panneau CSS.
Des astuces
- Vous pouvez également ouvrir la barre d'outils à partir des options de menu en haut de la fenêtre:
- Windows: Firefox → Développeur Web → Basculer les outils
- Mac ou Linux: Outils → Développeur Web → Basculer les outils
- Firefox 40 a la possibilité de masquer le panneau CSS afin que vous ayez plus d'espace pour éditer le HTML. Recherchez l'icône en forme de flèche dans le coin le plus à droite du fil d'Ariane et à droite du champ de recherche. Cliquez sur cette icône pour masquer le panneau CSS et cliquez à nouveau pour l'afficher.
- Vous pouvez également modifier les panneaux CSS, mais ils ne sont pas répertoriés dans cet article. Vous pouvez trouver des instructions pour éditer le code CSS sur Internet.
