Cette page a été traduite par l'API Cloud Translation.

Déboguer les extensions

Les extensions peuvent accéder aux mêmes outils pour les développeurs Chrome que les pages Web. Pour devenir un expert du débogage des extensions, vous devez savoir localiser les journaux et les erreurs des différents composants d'extension. Ce tutoriel présente des techniques fondamentales pour déboguer votre extension.

Avant de commencer

Dans ce guide, nous partons du principe que vous avez des connaissances de base en développement Web. Nous vous recommandons de lire Principes de base du développement, qui présente le workflow de développement des extensions. La section Concevoir l'interface utilisateur est une introduction à l'utilisateur. disponibles dans les extensions.

Interrompre l'extension

Dans ce tutoriel, nous allons dérégler un composant d'extension à la fois, puis nous montrerons comment résoudre le problème. N'oubliez pas d'annuler les bugs introduits dans une section avant de passer à la section suivante. Commencez par télécharger l'exemple de couleur défectueuse sur GitHub.

Déboguer le fichier manifeste

Tout d'abord, cassons le fichier manifeste en remplaçant la clé "version" par "versions":

manifest.json:

{
  "name": "Broken Background Color",
  "version": "1.0",
  "versions": "1.0",
  "description": "Fix an Extension!",
  ...
}

Essayons maintenant de charger l'extension en local. Une boîte de dialogue d'erreur pointant vers le problème s'affiche:

Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.

Une extension avec une clé de fichier manifeste non valide déclenche une boîte de dialogue d'erreur lors de la tentative de chargement. — Boîte de dialogue indiquant une erreur de clé de fichier manifeste non valide.

Lorsqu'une clé de fichier manifeste n'est pas valide, l'extension ne se charge pas, mais Chrome vous indique comment résoudre le problème.

Annulez cette modification et saisissez une autorisation non valide pour voir ce qui se passe. Remplacez l'autorisation "activeTab" par "activetab" en minuscules:

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

Enregistrez l'extension, puis réessayez de la charger. Cette fois, le chargement devrait s'effectuer correctement. Dans l'extension Gestion comporte trois boutons: Détails, Supprimer et Erreurs. La page Erreurs le libellé du bouton devient rouge en cas d'erreur. Cliquez sur le bouton Erreurs pour afficher les erreur suivante:

Permission 'activetab' is unknown or URL pattern is malformed.

Clic sur le bouton "Erreur" et affichage d'une erreur — Recherche d'un message d'erreur en cliquant sur le bouton "Erreurs".

Avant de continuer, modifiez à nouveau l'autorisation. Cliquez sur Tout effacer en haut à droite pour effacer les journaux, puis actualisez l'extension.

Bouton "Tout effacer" — </ph> Comment supprimer les erreurs liées aux extensions

Déboguer le service worker

Localiser des journaux

Le service worker définit la couleur par défaut sur storage et l'enregistre dans la console. Pour afficher ce journal, ouvrez le panneau des outils pour les développeurs Chrome en sélectionnant le lien bleu à côté de Inspect views (Inspecter les vues).

Ouverture des outils de développement pour le service worker d'extension. — </ph> Journaux de service worker dans le panneau "Outils pour les développeurs Chrome"

Localisation des erreurs

Interrompez le service worker en remplaçant onInstalled par une valeur oninstalled minuscule:

service-worker.js:

// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => { 
chrome.runtime.oninstalled.addListener(() => { 
  chrome.storage.sync.set({ color: '#3aa757' }, () => {
    console.log('The background color is green.');
  });
});

Actualisez la page et cliquez sur Erreurs pour afficher le journal d'erreurs. La première erreur indique que le service worker n'a pas pu s'enregistrer. Cela signifie qu'un problème est survenu lors de l'initiation:

Service worker registration failed. Status code: 15.

Échec de l'enregistrement du service worker. Code d'état: message d'erreur 15 — Message d'erreur concernant l'enregistrement du service worker.

L'erreur réelle survient après:

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

Uncaught TypeError: impossible de lire les propriétés d'un message d'erreur non défini — Message d'erreur TypeError non détecté.

Annulez le bug que nous avons introduit, cliquez sur Tout effacer dans l'angle supérieur droit, puis actualisez l'extension.

Vérifier l'état d'un service worker

Pour déterminer à quel moment le service worker se réveille pour effectuer des tâches, procédez comme suit:

Copiez l'ID d'extension situé au-dessus de "Inspecter les vues". <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ID d'extension sur la page "Gestion des extensions".
Ouvrez le fichier manifeste dans le navigateur. Par exemple : text chrome-extension://YOUR_EXTENSION_ID/manifest.json
Inspectez le fichier.
Accédez au panneau Application.
Accédez au volet Service workers.

Pour tester votre code, démarrez ou arrêtez le service worker à l'aide des liens situés à côté de status.

</ph> État du service worker dans le panneau "Application". (Cliquez pour agrandir l'image.)

De plus, si vous avez modifié le code d'un service worker, cliquez sur Update (Mettre à jour) ou skipWaiting pour appliquer immédiatement les modifications.

Déboguer la fenêtre pop-up

Maintenant que l'extension s'initialise correctement, interrompons la fenêtre pop-up en mettant en commentaire les lignes en surbrillance ci-dessous:

popup.js:

...
changeColorButton.addEventListener('click', (event) => {
  const color = event.target.value;

  // Query the active tab before injecting the content script
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 
    // Use the Scripting API to execute a script
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      args: [color],
      func: setColor
    });
  });
});

Revenez à la page "Gestion des extensions". Le bouton Erreurs réapparaît. Cliquez dessus pour affichez le nouveau journal. Le message d'erreur suivant s'affiche:

Uncaught ReferenceError: tabs is not defined

Page "Gestion des extensions" affichant une erreur pop-up — Page de gestion des extensions affichant une erreur pop-up.

Vous pouvez ouvrir les outils de développement du pop-up en inspectant la fenêtre pop-up.

L'erreur tabs is undefined indique que l'extension ne sait pas où injecter le script de contenu. Pour corriger ce problème, appelez tabs.query(), puis sélectionnez l'onglet actif.

Pour mettre à jour le code, cliquez sur le bouton Tout effacer dans l'angle supérieur droit, puis actualisez le .

Scripts de contenu de débogage

À présent, cassons le script de contenu en modifiant la variable "color" par "couleurs" :

content.js:

...
function setColor(color) {
  // There's a typo in the line below;
  // ❌ colors should be ✅ color.
  document.body.style.backgroundColor = color;
  document.body.style.backgroundColor = colors;
}

Actualisez la page, ouvrez la fenêtre pop-up et cliquez sur la case verte. Rien ne se passe.

Si vous accédez à la page de gestion des extensions, le bouton Erreurs ne s'affiche pas. En effet, seules les erreurs d'exécution, console.warning et, Les console.error sont enregistrées sur la page "Gestion des extensions".

Les scripts de contenu s'exécutent dans un site Web. Par conséquent, pour détecter ces erreurs, nous devons inspecter la page Web que l'extension tente de modifier:

Uncaught ReferenceError: colors is not defined

Erreur d'extension affichée dans la console de la page Web.

Pour utiliser les outils de développement à partir du script de contenu, cliquez sur la flèche du menu déroulant à côté de top et sélectionnez l'extension.

</ph> Erreur de référence non détectée: les couleurs ne sont pas définies.

L'erreur indique que colors n'est pas défini. L'extension ne doit pas transmettre la variable correctement. Corrigez le script injecté pour transmettre la variable de couleur au code.

Surveiller les requêtes réseau

Le pop-up effectue souvent toutes les requêtes réseau requises avant même les plus rapides les développeurs peuvent ouvrir les outils de développement. Pour afficher ces requêtes, actualisez la page depuis le panneau "Network". Il actualise la fenêtre pop-up sans fermer le panneau "DevTools".

Actualisez le panneau "Network" pour afficher les requêtes réseau pop-up — </ph> Actualisez le panneau "Network" (Réseau) pour afficher les requêtes réseau pop-up.

Déclarer des autorisations

Certaines API d'extension qui requièrent des autorisations. Reportez-vous à l'article Autorisations et à l'article Chrome API pour vous assurer qu'une extension demande les autorisations appropriées dans le fichier manifeste.

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

Important:Pour effectuer des appels fetch() vers un serveur externe, vous devez déclarer l'URL en tant qu'autorisation d'hôte.

Documentation complémentaire

Pour en savoir plus sur les outils pour les développeurs Chrome, consultez la documentation.