Boîte à outils du navigateur

La boite à outils du navigateur, permet de déboguer des modules complémentaires ainsi que le code JavaScript du navigateur lui-même, contrairement à la boite à outils normale qui ne fonctionne que pour les pages ordinaires. Ainsi, le contexte de la boite à outils du navigateur est le navigateur entier au lieu d'une simple page d'un seul onglet.

Note: Pour déboguer un module qui ne nécessite pas de redémarrage ou qui se base sur un SDK, il vaut mieux utiliser le Débogeur de modules. Pour les modules qui n'ont pas ces deux caractéristiques, la boite à outils du navigateur est suffisante.

Activer la boite à outils du navigateur

La boite à outils du navigateur n'est pas activée par défaut. Pour l'activer, il est nécessaire de cocher les options: "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant".

Ces options se trouvent dans les options des outils de développement, dans la section "Paramètres avancés" :

Developer Tools Settings

Ouvrir la boite à outils du navigateur

Il est possible d'ouvrir la boite, en ouvrant le menu (bouton new fx menu ) puis en ouvrant le menu "Développement", puis en choisissant "Boite à outils du contenu du navigateur".

Depuis Firefox 39, il est également possible d'utiliser le raccourci clavier Ctrl + Alt +Maj + I ( Cmd + Opt +Maj + I sur un Mac).

Une pop-up s'ouvrira alors (ce comportement peut être désactivé en passant la propriété devtools.debugger.prompt-connection à false dans about:config) :

Cliquer sur OK, ouvrira la boite à outils du navigateur dans sa propre fenêtre :

Il est alors possible d'inspecter le chrome du navigateur ainsi que de voir et déboguer tous les fichiers chargés par le navigateur lui-même et par tous les modules qui sont fonctionnels. Les outils disponibles sont les suivants :

Il est possible de déboguer les pages chrome: et about: en utilisant le Débogueur normal, comme si il s'agissait de pages de contenu ordinaires.

Cibler un document

dans la boite à outils normaux, il y a un bouton dans la barre d'outils qui permet de cibler des iframes spécifiques dans le document. Depuis Firefox 40 le même bouton est présent dans la boite à outils du navigateur. Cependant elle liste les contenus chrome "top-level" ainsi que les fenêtres de contenu. Cela permet d'inspecter des documents spécifiques dans dans des fenêtres chromes et des popups individuels aussi bien que les onglets.

Voici par exemple ce que le bouton liste lorsqu'il y a deux fenêtres ouvertes, l'une avec un seul onglet, l'autre avec deux :

Déboguer des popups

Nouveau dans Firefox 47

Il est difficile de déboguer des pop-up, car le navigateur les cache dès lors d'un clic en dehors de ladite popup. Depuis Firefox 47, il existe une façon de désactiver ce comportement. Il suffit de cliquer sur le bouton qui ressemble à quatre petits carrés dans la barre d'outils :

Les popups seront alors ouvertes tant que la touche Echap n'a pas été pressée. Il est alors possible d'utiliser l'Inspecteur pour examiner et modifier le contenu de la pop-up :

Il est possible d'utiliser la même technique pour déboguer les pop-up crées par les modules.

Il est à noter que ce changement est persistant, même après un redémarrage du navigateur.

Nous travaillons à modifier ce comportement à travers le bug 1251658. Mais avant que ce bug ne soit résolu, il faut désactiver le bouton manuellement avant de fermer la boite à outils du navigateur.

En interne, ce bouton active/désactive la préférence ui.popup.disable_autohide, qui peut être paramétrée manuellement dans about:config.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore, teoli, KittenOverlord, nora
 Dernière mise à jour par : maximelore,