La boite à outils réunit la plupart des outils de développement intégrés à Firefox dans un seul endroit. Vous pouvez l'ouvrir en sélectionnant "Outils de développement " dans le menu "Développement" (dans "Outils" pour OS X et Linux, ou dans "Firefox" sous Windows), ou en activant l'un des outils par exemple le débogueur JavaScript ou l'inspecteur web). Vous pouvez aussi utiliser le raccourci Ctrl Maj I sous Windows ou Linux, ou bien Cmd Opt i pour OS X. Ou bien même utiliser la touche F12.
par défaut, la fenêtre apparait en bas de la fenêtre de navigation, mais il est possible de la détacher. Voilà à quoi ça ressemble attaché :
cette fenêtre est séparée en 2 parties : la barre d'outils en haut et la partie principale en dessous :
Barre d'outils
la barre d'outils contient les boutons pour activer certains outils, pour attacher, détacher ou fermer la boite à outils.
Le sélecteur d'élément
Le bouton à gauche sert à activer le sélecteur. Il permet de sélectionner un élément de la page pour l'inspecter. Voir "Sélectionner un élément".
Outils de la barre d'outils
Il y a ensuite plusieurs boutons vous permettant de naviguer entre les différents outils de la Barre d'outils. La barre peut contenir les boutons suivants:
Il est à noter que tous les outils n'apparaitront pas forcément dans la barre : uniquement les outils disponibles sont visibles (par exemple, tous les outils ne prennent pas encore en charge le débogage à distance, donc si la cible du débogage n'est pas la fenêtre active, tous les outils ne seront pas disponibles).
Outils supplémentaires
la barre de boutons à gauche de la barre d'outils peut être personnalisée dans les options de développement. Par défaut, elle inclut :
Les outils suivants ne sont pas affichés par défaut mais peuvent être activés via les options :
- Afficher en surbrillance les zones repeintes
- Vue 3D
- Ardoise JavaScript
- Sélectionner une couleur depuis la page
- Prendre une capture d'écran de la page entière : Nouveauté de Firefox 32. Prend une capture d'écran de la page web et l'enregistre dans le dossier "Téléchargements".
- Sélectionner un iframe en tant que document cible : Nouveauté de Firefox 34.
Contrôles de la boite à outils :
Grâce à ces boutons on peut :
- Fermer la fenêtre.
- Choisir entre attaché sur le côté ou en dessous.
- Choisir entre fenêtre indépendante ou attachée
- Acceder aux options de développement
Options
Appuyer sur le bouton "options" (
) permet d'accéder aux options de la boite à outils et de modifier les réglages suivant :
Outils de développement par défaut
Ces cases à cocher permettent de choisir quels seront les outils affichés dans la boite à outils. Les nouveaux outils sont souvent désactivés par défaut.
Boutons disponibles dans la barre d'outils
Ces boutons permettent de choisir quels "standalone tools" ont leurs boutons dans la barre d'outils. Par défaut, seuls le sélecteur d'éléments, la console scindée et la vue adaptative sont présents.
Dans Firefox 32 il y existe un bouton pour prendre une capture d'écran de la page web, qui est désactivé par défaut.
Choix du thème de développement
Permet de choisir entre un thème clair et un thème sombre.
Préférences générales
Ces paramètres s'appliquent à plusieurs outils. Il n'y a qu'une seule option :
- Activer les journaux persistants : Activer cette option fera que la Console Web et le Moniteur Réseau ne videront pas leurs sorties à chaque changement de page.
Inspecteur
- Afficher les styles du navigateur : Activer cette option affichera les styles appliqués par le navigateur (user-agent styles) seront affichés dans l'onglet des règles. Cette option est une des nouveautés de Firefox 32. Il est à noter que cette option est indépendante de la case à cocher "Styles navigateur" dans l'onglet calculé de L'Inspecteur.
- Unité par défaut pour les couleurs : Cette option contrôle l'unité dans laquelle les couleurs sont représentées dans l'Inspecteur :
- Hexadécimal
- TSL(A) : Dans l'ordre, teinte saturation lumière (alpha)
- RVB(A) : Dans l'ordre, rouge vert bleu (alpha)
- noms de couleurs : Ex : Chartreuse
Console Web
- Activer l'horodatage : Activer cette option fera que la Console Web affiche l'horodatage (timestamp). Depuis Firefox 28, Cette option est désactivée par défaut.
Éditeur de style
- Afficher les sources originales : Quand un préprocesseur CSS qui supporte les source maps est utilisé, cela permet à l'Éditeur de style d'afficher les sources originales du préprocesseur plutôt que le CSS généré. En apprendre plus sur le support des source maps CSS par l'Éditeur de style. Si cette option est activée, les liens dans l'onglet des règles de l'Inspecteur pointeront vers les sources originales.
- Compléter automatiquement le CSS : Activer cette option permet à l'Éditeur de Style d'offrir des suggestions d'autocomplétion.
Profileur JavaScript
- Afficher les données de la plateforme Gecko : Activer cette option fera que les profils incluront les données de la plateforme Gecko.
Préférences de l'éditeur
Préférences pour l'éditeur de code CodeMirror, lequel est inclus dans Firefox et utilisé par plusieurs outils de développement tels que l'Ardoise JavaScript et l'Éditeur de style.
- Détecter l'indentation: indente automatiquement les nouvelles lignes en se basant sur l'indentation actuelle.
- Fermer automatiquement les parenthèses : Lorsque l'utilisateur ouvre une parenthèse, la parenthèse fermante est automatiquement rajoutée (fonctionne également pour les accolades).
- Indenter à l'aide d'espaces
- Taille de la tabulation
- Raccourcis clavier : choisit les raccourcis claviers par défaut de CodeMirror, avec au choix les raccourcis des éditeurs suivants :
- Vim
- Emacs
- Sublime Text
Paramètres avancés
- Désactiver le cache : Désactive le cache du navigateur pour simuler une première visite. Depuis Firefox 33 cette option est persistante, ce qui veut dire que si elle est activée, le cache sera désactivé dès que les outils de développement seront ouverts. Le cache est réactivé dès que les outils sont fermés.
- Désactiver JavaScript: recharge la page courante avec Javascript désactivé. Cette option n'est pas persistante.
- Enable Service Workers over HTTP: Autorise les enregistrements des Service Worker depuis des sites webs non sécurisés.
- Activer le débogage du chrome du navigateur : Permet d'utiliser les outils de développement dans le contexte du navigateur lui même et pas seulement dans du contenu web.
- Activer le débogage distant : Permet aux outils de développement de déboguer des instances de Firefox distantes.
Panneau principal
Le contenu du panneau principal dans la fenêtre est entièrement contrôlé par et spécifique à l'outil actuellement sélectionné.