MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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 :

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

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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : maximelore, Amandine83, joel.costamagna
 Dernière mise à jour par : maximelore,