Outils de développement

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

Quoi de neuf dans la Firefox Developer Edition ?

Firefox Developer Edition est une nouvelle version de Firefox créée spécialement pour les développeurs. Cette version comprend les dernières fonctionnalités de Firefox et des outils de développement expérimentaux. La version actuelle comprend les mises à jour suivantes des outils de développement :

Création

Outils de création pour les sites et les applications web.

Ardoise JavaScript: Un éditeur de texte intégré à Firefox vous permettant 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.

Exploration et débogage

Examiner, explorer et déboguer les sites et applications Web.

Console: Voir les messages émis par la page web. Cela permet aussi d'examiner et de manipuler le JavaScript de la page.
Inspecteur: Voir et modifier une page en HTML et en CSS.
Débogueur JavaScript: Parcourir, stopper, examiner et modifier le code JavaScript s’exécutant dans une page
Moniteur réseau: Inspectez toutes les requêtes réseau qui ont lieu quand la page est chargée.
Inspecteur de Stockage: Inspecter les cookies, le local storage, l'indexedDB, et le session storage présents dans une page.
Inspecteur DOM: Inspecter les propriétées DOM, les fonctions, etc de la page.
Barre de développement: Une interface en ligne de commande pour les outils de développement.
Débogage distant: Connecter les outils de développement de Firefox à une cible distante.
Pipette: Sélectionner une couleur de la page.
about:debugging: Un tableau de bord pour déboguer les modules complémentaires et les workers
Travailler avec des iframes: Comment travailler avec un iframe particulier.

Mobile

Outils pour le développement sur mobile.

Vue adaptative: Voir comment votre site web ou application sera affichée sur différentes tailles d'écrans. Sans avoir besoin de changer la taille de votre navigateur.
Gestionnaire d’applications: Le gestionnaire d'applications a été remplacé par WebIDE.
WebIDE: Créer, éditer, lancer, et déboguer les applications webs en utilisant le Simulateur Firefox OS ou un vrai appareil Firefox OS. WebIDE est le remplacement du Gestionaire d'application, disponible depuis Firefox 33.
Simulateur Firefox OS: Exécuter et déboguer votre application Firefox OS sur votre ordinateur, sans avoir besoin d'un appareil Firefox OS.
Déboguer sur Firefox pour Android: Connecter les outils de développement à Firefox pour Android.
Deboguer Firefox pour Android avec WebIDE: Avec les versions Firefox 36+ / Android Firefox 35+, il y a un procédé plus simple.
Valence: Connecter les outils de développement à Chrome pour Android et Safari pour IOS.

Performances

Diagnostiquer et corriger les problèmes de performance.

Performance: Analyser les performances de la réactivitée gloable, le JavaScript, et le layout des sites.
Mémoire: Déterminer quels objets prennent de la place en mémoire.
Frame rate graph: Voir le frame rate d'un site web.
Chronologie: Déterminer ce que fait le navigateur lorsque il éxécute un site.
Arbre D'appels: Déterminer où le code JavaScript passe le plus de temps
Flame Chart: Déterminer quelles fonctions sont sur la pile tout au long d'un profil de performance.
Outil de mise en évidence des zones repeintes: Mettre en évidence les parties de la fenêtre du navigateur qui sont repeintes en réponse aux évènements.
Affichage des évènements de reflow: Voir les évènements de reflow dans la console web.
Performances réseau: Voir le temps de chargement des différentes parties d'un site.

Débogage du navigateur

Par défaut, les outils de développement sont attachés à une page ou une application web, mais vous pouvez aussi les connecter au navigateur dans son ensemble. Utile pour le développement du navigateur et des modules.

Console du navigateur: Lisez les messages du navigateur lui-même et des modules. Exécutez 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

Les outils de développement sont conçus pour être extensible. Les modules de Firefox peuvent accéder aux outils de développement et les composants qu’ils utilisent, afin d’étendre les outils existants ou en ajouter de nouveaux. Avec le protocole de débogage à distance, vous pouvez implémenter vos propres clients et serveurs de débogage. Vous pouvez ainsi déboguer des sites web en utilisant vos propres outils, ou déboguer différentes cibles à l’aide des outils de Firefox.

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

Autres ressources

Cette section liste des outils qui ne sont pas maintenus par l'équipe "Developer Tools" de Mozilla, mais qui sont pour autant très utilisés par les développeurs web. Nous avons inclus quelques modules Firefox dans la liste. Vous trouverez une liste complète dans la catégorie "Développement Web" de addons.mozilla.org.

Firebug: Un outil de développement Web très puissant et très populaire. Il inclut un débogueur JavaScript, des outils pour voir et modifier le code HTML et CSS, et surveiller le trafic réseau.
Inspecteur DOM: Inspectez, parcourez et éditez le DOM des pages web et des fenêtres XUL.
Web Developer: Ajoute un menu et une barre d'outils au navigateur, avec différents outils dédiés au développement Web.

Outils Webmaker: Une suite d'outils développés par Mozilla, pensée pour des personnes commençant le développement Web.
Validateurs W3C: Le site du W3C héberge plusieurs outils pour vérifier la validité de votre site web par rapport aux standards. Il existe un validateur HTML et un validateur CSS.
ESLint: Un outil d'analyse de code JavaScript.

Rejoignez la communauté Developer tools

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

IRC: #devtools (en apprendre plus)
Autres liens: Wiki Dev tools