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

Travailler avec des iframes

Comment travailler avec un iframe particulier.

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.

Performances

Diagnostiquer et corriger les problèmes de performance.

Outil d'analyse des performances

Revamped JS profiler and frame rate timeline.

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.

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.

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.