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.

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.

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.