Examinez, modifiez et déboguez du HTML, des CSS et du JavaScript sur ordinateur ou sur mobile.
Si vous cherchez des informations sur l'utilisation des outils de développement disponibles dans Firefox, vous êtes au bon endroit.
Cette page fournit des liens vers des informations détaillées sur tous les outils principaux et additionnels de Firefox. Ainsi que d'autres liens vers par exemple : comment connecter et déboguer Firefox pour Android, comment étendre les outils de développement, et comment déboguer le navigateur lui-même.
Nous vous encourageons à explorer les liens de la barre latérale, et ceux dans la page, pour en apprendre plus sur les outils de développement. Si vous avez des retours ou des problèmes sur ces outils, vous pouvez nous envoyer des messages sur notre mailing-list ou notre canal IRC (Voir les liens communauté, vers la fin de la page). Si vous avez des questions ou des retours spécifiquement sur la documentation, MDN discourse est l'endroit parfait.
Note: Si vous débutez dans le développement web et/ou l'utilisation des outils de développement, la page apprendre le développement web peut vous aider. Vous pouvez également consulter Commencer avec le web et Découvrir les outils de développement des navigateurs.
Outils principaux
Les outils de développement peuvent être ouverts avec Ctrl + Shift + I ou F12 sous Windows et Linux, et Cmd + Opt + I sous OS X.
La partie droite de la barre d'outils contient plusieurs boutons qui permettent d'effectuer des actions, ou de changer certaines options des outils.
 |
Ce bouton apparait lorsqu'il y a plusieurs iframe dans la page. Cliquer dessus affiche la liste des iframes sur la page actuelle, et permet de sélectionner celle ciblée par les outils. |
 |
Ce bouton permet de prendre une capture d'écran de la page. (Note: Cette fonctionnalité n'est pas activée par défaut, et doit être activée dans les paramètres avant). |
 |
Active le mode Vue Adaptative. |
 |
Ouvre le menu qui inclut les options d'ancrage, la possibilités d'activer la console scindée, et d'afficher les options des outils de développement. Ce menu inclut également des liens vers la documentation des outils de développement de Firefox et vers la communauté Mozilla. |
 |
Ferme les outils de développement. |
Inspecteur
Permet de voir et modifier une page en HTML et en CSS. Permet de visualiser différents aspects de la page y compris les animations, l'agencement de la grille.
Console Web
Affiche les messages émis par la page web. Permet également d'interagir avec la page via JavaScript.
Débogueur JavaScript
Permet de parcourir, stopper, examiner et modifier le code JavaScript s’exécutant dans une page
Réseau
Permet d'inspecter les requêtes réseau lors du chargement de la page.
Performances
Permet d'analyser les performances de la réactivité globale, du JavaScript et, de l'agencement des sites.
Vue Adaptative
Permet de voir comment un site web ou une application se comporte avec différents types d'appareils et de connexions.
Inspecteur d'Accessibilité
Permet d’examiner l’arborescence d’accessibilité de la page courante, qui est utilisée par les lecteurs d’écran et d’autres technologies d’assistance, afin de pouvoir savoir ce qui manque ou ce qui peut être amélioré.
Note: Le terme utilisé pour designer l'interface qui contient tout les outils de dévelopement est: La boite à outils.
Outils supplémentaires
Ces outils sont également inclus dans Firefox. Mais, contrairement aux « Outils principaux », il est possible qu'ils soient utilisés moins régulièrement.
- Mémoire
- Déterminer quels objets prennent de la place en mémoire.
- Inspecteur de Stockage
- Inspecter les cookies, le stockage local, l'indexedDB, et le stockage de session présent dans une page.
- DOM Property Viewer
- Inspecter les propriétés DOM d'une page (fonctions, etc.)
- Pipette
- Sélectionner une couleur de la page.
- Ardoise JavaScript
- Un éditeur de texte intégré à Firefox qui permet d'écrire et d'exécuter du JavaScript..
- Éditeur de Styles
- Voir et modifier les styles CSS de la page affichée.
- Éditeur de Shaders
- Voir et éditer les vertex shaders et les fragment shaders utilisés par WebGL.
- Éditeur Web Audio
- Examiner les nœuds audio dans un contexte audio, et modifier leurs paramètres.
- Capture d'écran
- Prendre une capture d'écran de la page entière ou d'un seul élément
- Mesurer une portion de la page
- Mesurer une zone spécifique de la page web
- Règles
- Afficher des règles verticales et horizontales sur une page web
Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition
Connecter les outils de développement
Si vous ouvrez les outils de développemnt avec des raccourcis clavier ou les éléments équivalents du menu, ils cibleront la page actuellement ouverte dans l'onglet actif. Il est cependant possible également d'attacher ces outils à diverses autres cibles, à la fois dans le navigateur ouvert et dans d'autres navigateurs et même dans d'autres appareils.
- about:debugging
- Déboguer des modules complémentaires, des onglets de contenu et ceux qui travaillent dans l'explorateur.
- Se connecter à Firefox pour Android
- Connecter les outils de développement à une instance de Firefox s'exécutant sur un appareil Android.
- Se connecter aux iframes
- Connecter les outils de développement sur un iframe donné dans la page en cours.
- Se connecter aux autres navigateurs
- Connecter les outils de développement à Chrome pour Android et Safari pour IOS.
Déboguer le navigateur
Par défaut, les outils de développement sont attachés à une page ou une application Web. Il est cependant possible de les connecter au navigateur en lui même. C'est utile lors de développements portant sur le navigateur ou sur un module complémentaire.
- Console du navigateur
- Voir les messages issus du navigateur lui-même et des modules, et exécuter du code JavaScript dans le contexte du navigateur.
- Boîte à outils du navigateur
- Attacher les outils de développement au navigateur lui-même.
Étendre les outils de développement
Ces outils sont pensés pour être extensibles. Les modules complémentaires de Firefox peuvent accéder aux outils de développement ainsi qu'aux composants qu'ils utilisent. Avec le protocole de débogage distant, il est possible d'implémenter son propre débogage des clients et des serveurs, permettant de déboguer des sites web avec vos propres outils ou bien de déboguer des cibles différentes avec les outils de Firefox.
- Exemples d'extensions d'outils de développement.
- Voyez ces exemples pour comprendre comment mettre en œuvre une extension d'outil de développement.
- Ajouter un nouveau panneau aux outils de développement
- Écrire un module complémentaire qui ajoute un nouveau panneau à la boite à outils.
- Protocole de débogage à distance
- Le protocole utilisé pour connecter les outils de développement de Firefox à une cible à déboguer, telle qu’une instance de Firefox ou un terminal Firefox OS.
- Éditeur de source
- Un éditeur de code intégré à Firefox pouvant être embarqué dans votre module.
- L’interface
Debugger - Une API permettant à du code JavaScript d’observer l’exécution d’un autre code JavaScript. Les outils de développement de Firefox utilisent cette API pour implémenter le débogueur JavaScript.
- Sortie personnalisée de la Console Web
- Comment étendre et personnaliser la sortie de la Console Web et de la Console Javascript.
Migrer de Firebug
Firebug est arrivé en fin de vie (voir Firebug, présent en esprit dans les outils de Firefox sur le pourquoi du comment), et nous sommes conscients que certains peuvent avoir du mal à faire la transition. Pour faciliter celle-ci, nous avons écrit un guide pratique : Migrer depuis Firebug.
Contribuer
Si vous voulez aider à améliorer les outils de développement, voici les ressources qui vous mettront le pied à l'étrier :
- S'impliquer
- La page du wiki de Mozilla expliquant comment s'impliquer.
- firefox-dev.tools
- Un outil pour aider à trouver des bugs sur lesquels travailler.
Rejoignez la communauté Developer tools
- IRC: #devtools (en apprendre plus)
- Team info: Dev tools wiki
- Blog: Hacks blog