Guide : outils de développement Web dans Firefox

Sommaire

Page Inspector (Inspecteur de page)
HTML Inspector (Inspecteur HTML)
CSS Inspector (Inspecteur CSS)
JavaScript Scratchpad
Web Console (Console Web)
Get More Tools (Ajouter des outils)

Important: les captures d’écran et chemins d’images sont conservés ci-dessous pour référence visuelle.

Définitions rapides

Inspecteur de page : outil visuel pour cibler et surligner un élément du DOM.
Console Web : zone pour voir erreurs, messages et requêtes réseau, et exécuter des commandes JS.
Scratchpad : éditeur pour écrire et exécuter du JavaScript dans l’onglet courant.

Pourquoi utiliser ces outils

Ces outils permettent d’itérer rapidement sur l’interface, de repérer des problèmes de mise en page, de tester des correctifs CSS/JS sans déployer et de diagnostiquer les requêtes réseau. Ils remplacent et complètent des extensions comme Firebug et la Web Developer Toolbar.

Capture d'écran du menu Outils de développement de Firefox

Inspecteur de page

Pour inspecter un élément : clic droit sur l’élément → « Inspecter » ou appuyez sur Q. Vous pouvez aussi ouvrir l’inspecteur depuis le menu Web Developer.

Barre d'outils de l'inspecteur affichée en bas de l'écran

L’interface montre une barre d’outils en bas (ou détachable selon votre version). L’élément sélectionné est mis en évidence, le reste de la page est atténué pour se concentrer sur le ciblage.

Vue d'un élément sélectionné mis en évidence dans la page

Pour sélectionner un nouvel élément, cliquez sur le bouton Inspecter dans la barre d’outils, survolez la page et cliquez sur l’élément désiré. Firefox met en surbrillance l’élément sous votre curseur.

Sélectionner un élément en survolant la page

Vous pouvez naviguer dans la hiérarchie DOM à l’aide des « breadcrumbs » (fil d’Ariane) dans la barre d’outils pour monter/descendre dans les parents et enfants.

Inspecteur HTML

Cliquez sur le bouton HTML pour afficher le code HTML de l’élément sélectionné.

Affichage du code HTML d'un élément sélectionné

L’inspecteur HTML permet d’ouvrir/fermer les balises pour visualiser la structure. Si vous préférez voir la page comme un fichier plat, utilisez la commande « Voir le code source de la page » depuis le menu Web Developer.

Structure HTML développée et repliée pour lecture rapide

Inspecteur CSS

Cliquez sur le bouton Style pour afficher les règles CSS appliquées à l’élément sélectionné.

Panel affichant les règles CSS appliquées à un élément

Basculez entre le panneau Règles et le panneau Propriétés. Le panneau Propriétés inclut une zone de recherche pour filtrer rapidement les propriétés CSS.

Panneau propriétés CSS avec champ de recherche

Vous pouvez modifier le CSS à la volée depuis le panneau Règles : décocher une règle pour la désactiver, cliquer sur une valeur pour la modifier ou ajouter une règle personnalisée en haut du panneau. Exemple : ajouter la règle font-weight: bold; rendra le texte en gras immédiatement.

Modification en direct d'une règle CSS pour rendre le texte en gras

Astuce : utilisez des toggles pour tester des fixes rapides avant de les reporter dans vos fichiers sources.

JavaScript Scratchpad

Le Scratchpad offre un éditeur avec coloration syntaxique pour écrire et exécuter du JavaScript dans l’onglet courant. Tapez votre code puis choisissez Execute → Run.

Éditeur Scratchpad avec code JavaScript

Exemple rapide :

window.console.log("Hello World");

Sélectionnez Execute → Run et le script s’exécutera dans l’onglet actif.

Commande d'exécution dans le menu Execute du Scratchpad

Console Web

La Console Web remplace l’ancien Error Console. Elle affiche plusieurs types de messages : requêtes réseau, erreurs CSS, erreurs JavaScript et messages de développeur. Vous pouvez activer/désactiver la visibilité de chaque type.

Vue de la Console Web montrant différents types de messages

Qu’est-ce qu’un message de développeur ? C’est tout message envoyé à window.console depuis votre code. Par exemple :

window.console.log("Débogage : variable x=", x);

Ces messages aident à tracer le comportement pendant l’exécution.

Messages de console et requêtes réseau listés dans la Console Web

Rafraîchissez la page pour voir les requêtes réseau et messages générés au chargement.

Liste des requêtes réseau et des ressources chargées

Utilisez la zone de recherche pour filtrer les messages ; cliquez sur une requête pour afficher plus de détails.

Détails d'une requête réseau affichés depuis la Console Web

Depuis Firefox 10, la Console peut coopérer avec l’Inspecteur de page : la variable $0 référence l’objet actuellement sélectionné dans l’inspecteur. Par exemple, pour cacher l’élément sélectionné :

$0.style.display = "none";

Exemple montrant l'usage de $0 pour manipuler l'élément sélectionné

Pour approfondir les fonctions intégrées de la Console, consultez la documentation sur le site MDN.

Ajouter des outils

L’option Get More Tools ouvre la collection Web Developer’s Toolbox sur le site Mozilla Add-Ons. On y trouve des extensions utiles comme Firebug et Web Developer Toolbar.

Méthodologie rapide : corriger un problème de mise en page en 6 étapes

Ouvrir l’Inspecteur et sélectionner l’élément affecté.
Vérifier la cascade CSS dans le panneau Règles ; repérer les règles surchargées.
Désactiver une à une les règles suspectes pour isoler la cause.
Modifier les valeurs CSS en direct et tester plusieurs options.
Si le problème persiste, utiliser la Console pour vérifier les erreurs JS ou calculs de style.
Reproduire la correction côté source et exécuter des tests de régression.

Important: testez vos modifications dans plusieurs tailles d’écran et navigateurs.

Fiche d’astuces et raccourcis utiles

Action	Raccourci / Commande
Ouvrir Inspecteur	Clic droit → Inspecter / Q
Exécuter un script dans Scratchpad	Execute → Run
Log dans la Console	window.console.log(…)
Manipuler l’élément sélectionné	$0 (dans la Console)

Checklists par rôle

Développeur front-end

Reproduire le bug dans l’onglet local.
Inspecter le DOM et le CSS.
Tester une correction dans l’Inspecteur.
Reporter la correction dans le dépôt et documenter le ticket.

Vérifier l’absence d’erreurs JS dans la Console.
Confirmer que les ressources réseau se chargent correctement.
Test de régression sur différents viewport.

Designer

Vérifier les polices, espacements et contraintes responsive.
Valider l’alignement et la hiérarchie visuelle après modification.

Cas limites et quand cela échoue

Les modifications dans l’Inspecteur sont temporaires : elles n’éditent pas vos fichiers sources.
Les bugs côté serveur ou les erreurs de configuration réseau ne se résolvent pas via l’Inspecteur.
Les extensions ou le cache du navigateur peuvent masquer un problème ; testez en mode navigation privée ou avec les extensions désactivées.

Critères d’acceptation pour une correction visuelle

L’élément s’affiche correctement sur les trois tailles d’écran standard (mobile, tablette, desktop).
Aucune erreur JavaScript nouvelle dans la Console après correction.
Les performances réseau ne sont pas dégradées (pas de requêtes non nécessaires).
Les modifications sont versionnées et déployées via la CI.

Alternatives et outils complémentaires

Firebug : historique populaire, utile pour certaines anciennes configurations.
Web Developer Toolbar : collection d’outils orientés productivité.
Outils dev intégrés d’autres navigateurs (Chrome DevTools, Edge DevTools) pour tester la compatibilité.

Résumé

Les outils de développement de Firefox offrent un flux de travail rapide pour inspecter le DOM, éditer le CSS en direct, exécuter du JavaScript et analyser les requêtes réseau. Utilisez l’Inspecteur, le Scratchpad et la Console en combinaison pour diagnostiquer et corriger la plupart des problèmes front-end. Complétez avec des extensions si besoin et suivez la méthodologie en 6 étapes pour des corrections fiables.

Extras visuels et historique : si vous utilisez Firefox depuis longtemps, vous vous souviendrez peut‑être du DOM Inspector ; les outils intégrés ont beaucoup évolué depuis.

Utiliser les outils de développement Web de Firefox