mozilla
Examinez, modifiez, et déboguez du HTML, du CSS, et du JavaScript sur ordinateur, et sur mobile.
Partager vos idées

Partager vos idées

Demandez de nouvelles fonctionnalités pour les outils de développement ou votez pour les idées formulées par les autres développeurs.


Créer

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.

Explorer et déboguer

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

Console web
Voir des informations, des messages d'erreurs ou d'avertissements émis par le navigateur ou la page web. Cela permet aussi d'examiner et de manipuler le JavaScript de la page.
Inspecteur
Voir et modifier l'HTML et le CSS de l'élément sélectionné
Débogueur JavaScript
Parcourez votre code JavaScript s’exécutant dans le navigateur et observer les variables pour chasser les bugs.
Moniteur réseau
Inspectez toutes les requêtes réseau qui ont lieu quand la page est chargée, et combien elles mettent à s'exécuter.
Barre de développement
Une interface en ligne de commande pour les outils de développement.
Vue 3D
Affiche une représentation en 3D de la page visitée.
Pipette
Sélectionner une couleur de la page.

Mobile

Outils pour le développement sur mobile.

Gestionnaire d’applications
Exécuter et déboguer votre application Firefox OS sur votre ordinateur, sans avoir besoin d'un appareil Firefox OS.
WebIDE
Le remplaçant du Gestionnaire d'applications 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.
Vue adaptative
Voir de quoi son site ou son application Web aura l'air sur différentes tailles d'écrans, sans changer la taille de la fenêtre de son navigateur.
Déboguer sur Firefox pour Android
Connecter les outils de développement à Firefox pour Android.
Valence
Connecter les outils de développement à Chrome pour Android et Safari pour IOS.

Performance

Diagnostiquer et corriger les problèmes de performance.

Profileur JavaScript
Utilisez le profileur pour savoir à quels endroits votre code JavaScript passe le plus de temps.
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.
Performance réseau
Voir le temps de chargement des différentes parties de votre site.

Déboguer le 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 :