Outils de développement

Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Examinez, modifiez, et déboguez du HTML, du CSS, et du JavaScript sur ordinateur, et sur mobile.
Installer Firefox Developer Edition

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 present 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.
Pipette
Sélectionner une couleur de la page.
Travailler avec des iframes
Comment travailler avec un iframe particulier.
about:debugging
Un tableau de bord pour déboguer les modules complémentaires et les workers

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 gestionaire d'applications à été remplacé par WebIDE.
WebIDE
Creer, editer, lancer, et deboguer 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.
Debugging Firefox pour Android avec WebIDE
Avec les versions Firefox 36+ / Android Firefox 35+, il y a un proccéssus 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.
Outil de mise en évidence des zones repeintes
Met en évidence les parties de la fenêtre du navigateur qui sont repeintes en réponses aux évènements.
Journalisation des évènements de reflow
Voir les évènement de reflow dans la console web.
Performances réseau
Voir le temps de chargement des différentes parties de votre 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
Écrie 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 utilise 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évelopemment.
Ces exemples sevent à faciliter la compréhension sur comment implémenter un module complémentaire d'outils de de dévelopemment.

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.
JSHint
Un outil d'analyse de code JavaScript.

Rejoignez la communauté Developer tools

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