Examinez, modifiez, et déboguez du HTML, du CSS, et du JavaScript sur ordinateur, et sur mobile. Pour avoir la dernière version des outils de développement, téléchargez Firefox Developer Edition.
See what your users see in their browsers. Test your sites in up to 800 browser and OS combinations with our cross-browser testing tutorial.
Made just for you by Mozilla and Sauce labs.
Outils principaux
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 sur différents types d'appareils et de connexions.
Outils supplémentaires
Ces outils sont également inclus dans Firefox. Cependant 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...)
- Barre de développement
- Une interface en ligne de commande pour les outils de développement.
- 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 Style
- 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
Connecter les outils de développement
Les outils de développement ciblent la page actuelle par défaut. Il est cependant possible d'attacher ces outils à une variété de cibles différentes. Cela inclut des cibles dans le navigateur, dans d'autres navigateurs et même dans d'autres appareils.
- about:debugging
- Un tableau de bord pour déboguer les modules complémentaires et les workers
- Connexion à Firefox pour Android
- Connecter les outils de développement à une instance de Firefox s'exécutant sur un appareil Android.
- Travailler avec des iframes
- Comment travailler avec un iframe particulier.
- Valence
- Connecter les outils de développement à Chrome pour Android et Safari pour IOS.
Deboguer le navigateur
Par défaut, les outils de développement sont attachés à une page 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
- Lire les messages du navigateur lui-même et des modules. Exécuter du JavaScript dans le contexte de la fenêtre du navigateur.
- Boîte à outils du navigateur
- Attache 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 de clients et serveur. Cela peut permettre de déboguer des sites web en utilisant des outils personnels ou bien de déboguer des cibles différentes en utilisant les outils de Firefox.
- Examples de modules complémentaires d'outils de développement.
- Ces exemples servent à faciliter la compréhension sur comment implémenter un module complémentaire d'outils 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.
Contribuer
Si vous voulez aider à améliorer les outils de développement, voici les ressources qui vous mettront le pied à l'étrier :
- Get Involved
- 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