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. Le même bouton apparaît dans la boîte à outils du navigateur où il liste toutes les fenêtres de chrome et de contenu de niveau supérieur ainsi que les iframes qu'elles contiennent. Cela vous permet d'inspecter les documents dans des fenêtres chromées et des fenêtres contextuelles individuelles, ainsi que dans des onglets de contenu.

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

Il est difficile de déboguer les popups, car le navigateur les cache dès que vous cliquez en dehors d'eux. Il existe un moyen de désactiver ce comportement. Cliquez sur le menu de la boîte à outils et sélectionnez Désactiver le masquage automatique des popups.

 

Maintenant, lorsque vous ouvrez une fenêtre pop-up, elle reste ouverte jusqu'à ce que vous appuyiez sur la touche Echap  . Vous pouvez utiliser le sélecteur de nœuds de l'Inspecteur pour sélectionner ce panneau, puis examiner et modifier son contenu :

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

Note: Ce changement n'est pas persistant au redémarrage du navigateur. Lorsque vous fermez la boîte à outils du navigateur, le réglage est effacé.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : hellosct1, wbamberg, maximelore, nico_nc, teoli, KittenOverlord, nora
Dernière mise à jour par : hellosct1,