Les techniques décrites ici fonctionnent dans Firefox 50 et plus. Si vous devez utiliser une version antérieure de Firefox, reportez-vous à l'article sur les extensions de débogage à l'aide des APIs WebExtensions avant Firefox 50.

Cet article explique comment vous pouvez utiliser les outils de développement de Firefox pour déboguer les WebExtensions.

Une extension peut se composer de diverses pièces différentes — scripts de fond, fenêtes contextuelles, pages d'options, scripts de contenu — et vous devrez utiliser un flux de travail légèrement différent pour déboguer chaque pièce. Donc, chaque pièce reçoit une section de haut niveau dans cet article, et l'intention est que ces sections peuvent être lues séparemment. Nous commencerons par présenter le débogueur d'extensions, que vous utiliserez pour déboguer la plupart des éléments de votre extension.

Le débogger d'extension

La plupart de cet article, nous utiliserons le débogueur d'extension. Pour ouvrir le débogueur extension :

  • Ouvrir Firefox
  • Entrez "about:debugging" dans la barre de l'URL
  • Cliquez sur "Charger une extension complémentaire"
  • Cliquez sur le bouton "Déboguer" à côté de votre extension
  • Cliquez sur "OK" dans la boîte de dialogue d'avertissement

Vous verrez alors une nouvelle fenêtre. La fenêtre principale de Firefox sera transférée au premier plan, donc vous devrez cliquer sur la nouvelle fenêtre pour la mettre en avant.

Cette nouvelle fenêtre est parfois appelée une "boîte à outils" et contient les outils de débogage que nous utiliserons. Il a une interface d'onglets: la rangée d'onglets le long en haut vous permet de basculer entre les différents outils :

Dans cet article, nous utiliserons trois outils de débogage:

  • La Console: cela affiche les messages enregistrés par l'extension ainsi que les messages d'erreur enregistrés par le navigateur car il exécute l'extension. Il fournit également une ligne de commande vous permettant d'exécuter JavaScript dans le contexte de l'extension.
  • Le Debogueur: cela vous permet de définir des points d'arrêt et des points de contrôle dans le JavaScript de votre extension, et d'examiner et de modifier son état interne.
  • L'Inspecteur: cela vous permet d'examiner et de modifier le HTML et le CSS utilisés pour créer les pages de votre extension.

Débogué les scripts d'arrière-plan

Les exemples de cette section utilisent l'extension d'exemple "notify-link-clicks-l10n". Si vous souhaitez jouer, vous pouvez trouver cet exemple dans le dépôt webextensions-examples.

Les scripts d'arrière-plan restent chargés pendant toute la durée de l'extension.  Ils sont chargés dans une  "page d'arrière-plan" invisible : par defaut, il s'agit d'un document HTML vide, mais vous pouvez spécifier votre propre contenu HTML à l'aide de la clé "background" dans "manifest.json".

Vous pouvez déboguer les scripts de fond à l'aide du Débogueur d'extension.

Dans la Console du débogueur d'extensions, vous verrez la sortie enregistrée, y compris les appels à console.log() à partir de vos propres scripts de fond et des erreurs que le navigateur déclenche au fur et à mesure qu'il les exécute. Notez que pour le moment, la console affiche toutes les erreurs soulevées par le navigateur, pas seulement les erreurs liées à votre code d'extension.

Par exemple, l'extension d'exemple notify-link-clicks-i18n enregistre un message à partir de son script d'arrière-plan lorsqu'il reçoit un message de l'un de ses scripts de contenu :

En utilisant la ligne de commande de la console, vous pouvez accéder et modifier les objets créés par vos scripts d'arrière-plan.

Par exemple, nous appelons la fonction notify() définie dans le script d'arrière-plan de l'extension:

Si vous passez au débogueur, vous verrez tous les scripts d'arrière-plan de votre extension. Vous pouvez définir des points d'arrêt, passer le code, et faire tout ce que vous attendez d'être capable de faire dans un débogueur.

Si vous appuyez sur la touche échape pendant que vous êtes dans le Débogueur, la boîte à outils sera divisée, la moitié inférieure maintenant occupée par la Console. Pendant que vous êtes dans un point d'arrêt, vous pouvez maintenant modifier l'état du programme à l'aide de la console. Voir Split console pour en savoir plus.

Débogué les pages d'options

Les pages d'options sont des pages HTML que le développeur d'extension peut fournir, qui contiennent des options pour l'add-on. Ils sont généralement affichés dans un iframe dans le Gestionnaire des extensions (pour voir le Gestionnaire des Add-ons, visitez la page "about:addons").

Pour déboguer les pages d'options:

Toutes les sources JavaScript inclues sont listées dans le débogueur:

Cette vidéo utilise l'exemple WebExtension favourite-colour.

Vous verrez également les messages enregistrés par votre code dans la Console du débogueur d'extensions.

Vous pouvez également utiliser le débogueur d'extensions pour déboguer les pages HTML et CSS. Tout d'abord, vous devez pointer les outils à l'iframe qui héberge la page d'options. Pour ce faire: ouvrez la page d'options, cliquez sur l'icône mise en surbrillance dans la capture d'écran ci-dessous et sélectionnez la page d'options dans la liste déroulante:

Passez maintenant à l'onglet Inspecteur et vous pourrez examiner et modifier le HTML et CSS pour la page:

Débogué les popups

Les Popups sont des boites de dialogue qui sont liées aux actions du navigateur ou aux actions de page. Ils sont spécifiés en utilisant un document HTML qui peut include des sources CSS et JavaScriptpour le style et le comportement. Chaque fois que le popup est visible, vous pouvez utiliser le débogueur des extensions pour déboguer son code.

Un problème avec les fenêtres contextuelles est que si un popup est ouvert et que vous cliquez sur l'extérieur de la fenêtre contextuelle, la fenêtre contextuelle est fermée et son code est déchargé. Cela rend évidemment impossible de déboguer. Pour supprimer ce comportement, cliquez sur le bouton dans le Débogueur extension que nous avons mis en évidence dans la capture d'écran ci-dessous :

Maintenant, lorsque vous ouvrez un popup, il restera ouvert jusqu'à ce que vous appuyez sur Escape.

Notez que cette modification s'applique aux fenêtres contextuelles intégrées, comme le menu Hamburger (), ainsi que les fenêtres contextuelles d'extensions.

Notez également que la modification est persistante, même lors des redémarrages du navigateur. Nous travaillons à résoudre ce problème dans le bogue 1251658, mais jusqu'à ce moment-là, vous préférez réactiver le recouvrement automatique en cliquant de nouveau sur le bouton avant de fermer la boîte à outils du navigateur.

En interne, ce bouton permet de basculer la préférence ui.popup.disable_autohide, que vous pouvez basculer manuellement avec about:config.

Lorsque la fenêtre contextuelle est ouverte, ses sources JavaScript seront répertoriées dans le débogueur. Vous pouvez définir des points d'arrêt et modifier l'état interne du programme:

Cette vidéo utilise l'exemple d'extension beastify.

Vous pouvez également utiliser le débogueur d'extensions pour déboguer les HTML et CSS du popup. Tout d'abord, vous devez pointer les outils dans le document contextuel. Pour ce faire : Ouvrez le popup, puis cliquez sur l'icône mis en surbrillance dans la capture d'écran ci-dessous et sélectionnez la page contextuelle dans la liste déroulante :

Passez maintenant à l'inspecteur, et vous pourrez examiner et modifier le HTML et CSS du popup:

Débogué les scripts de contenu

Vous pouvez utiliser le débogueur d'extension pour déboguer les pages d'arrière-plan, les pages d'options et les popups. Toutefois, vous ne pouvez pas l'utiliser pour déboguer les scripts de contenu. C'est parce que, dans le  multiprocessus Firefox, Les scripts de contenu s'exécutent dans un processus différent des autres parties de votre extension.

Pour déboguer les scripts de contenu attachés à une page Web, utilisez les outils de développement Web normaux pour cette page:

  • Soit sélectionnez "Toggle Tools" dans le sous-menu Developpeur Web dans le menu Firefox (ou le menu Outils si vous affichez la barre de menu ou sur Mac OS X)
  • Ou appuyez sur le clavier CtrlShiftI (CommandOptionI sur OS X).

Par défaut, les outils sont affichés en bas de l'onglet du navigateur, afin de refléter le fait qu'ils sont attachés à cet onglet. Vous verrez une sortie des instructions console.log() dans vos scripts de contenu. Vous verrez également vos scripts de contenu répertoriés dans le Débogueur, où vous pourrez définir des points d'arrêt, parcourir le code, etc.

Cette vidéo utilise l'exemple WebExtension notify-link-clicks-i18n

Si l'onglet Outils de développement n'était pas déjà ouvert lorsque le script de contenu a été injecté, le script de contenu n'est pas listé dans le panneau de débogage. Si vous rencontrez cela, le rechargement de la page avec l'onglet Outils du développeur ouvert devrait résoudre le problème.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : hellosct1
 Dernière mise à jour par : hellosct1,