Examinez, modifiez et déboguez du HTML, des CSS et du JavaScript sur ordinateur ou sur mobile.

Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition

Télécharger Firefox Developer Edition

 

Outils principaux

Inspecteur

The all-new Inspector panel in Firefox 57.

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

The all-new Console in Firefox 57.

Affiche les messages émis par la page web. Permet également d'interagir avec la page via JavaScript.


Débogueur JavaScript

The all-new Firefox 57 Debugger.html

Permet de parcourir, stopper, examiner et modifier le code JavaScript s’exécutant dans une page

Réseau

The Network panel in Firefox 57 DevTools.

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

Responsive Design mode in Firefox 57.

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. 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.)
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 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

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.


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.

Examples 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 arrive 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

Choisissez votre méthode préférée pour rejoindre la discussion :

Sous-navigation

  1. Outils principaux
    1. Inspecteur
    2. Console web
    3. Débogueur JavaScript
    4. Moniteur réseau
    5. Performances
    6. Vue adaptative
    7. Astuces
  2. Plus d'outils
    1. Mémoire
    2. Inspecteur de stockage
    3. DOM Property Viewer
    4. Barre de développement
    5. Pipette
    6. Capture d'écran
    7. Ardoise JavaScript
    8. Éditeur de style
    9. Nuanceur
    10. Éditeur Web Audio
    11. Régles
    12. Mesurer une portion de la page
    13. Afficher le code source
  3. Connection aux outils de développement
    1. about:debugging
    2. Connexion à Firefox pour Android
    3. Connexion aux iframes
    4. Connexion à d'autres navigateurs
  4. Débogage du navigateur
    1. Console du navigateur
    2. Boite à outils du navigateur
  5. Extensions pour les outils de développement
    1. Ajout d'un panneau à la boîte à outils
    2. Exemples d'extensions aux outils de développement
    3. Protocole de déboguage à distance
    4. Transport des flux
    5. Éditeur du source
    6. L’interface Debugger
    7. Sortie personnalisée dans la console web
  6. Paramètres
  7. Notes de version