google-chrome-extension
Intégration de l'outil de développement

Point de repère programmatique

Ajoutez l'instruction de débogueur dans votre script de contenu

var foo = 1;
debugger;

foo = 2;

Ouvrez l'outil de développement sur la page Web où votre script de contenu est injecté pour voir la pause d'exécution du code sur ces lignes.

Débogage de la page d'arrière-plan / du script

Le script d'arrière-plan est comme tout autre code JavaScript. Vous pouvez le déboguer en utilisant les mêmes outils que vous déboguez le code JavaScript dans Chrome.

Pour ouvrir les outils de développement Chrome, accédez à chrome://extensions et activez le mode développeur :

Vous pouvez maintenant déboguer toute extension ayant une page d'arrière-plan ou un script. Faites défiler jusqu'à l'extension que vous souhaitez déboguer et cliquez sur le lien de la page d'arrière - plan pour l'inspecter.

Conseil: Pour recharger l'extension, vous pouvez appuyer sur F5 dans la fenêtre des outils de développement. Vous pouvez placer des points d'arrêt dans le code d'initialisation avant de recharger.

Conseil: Si vous cliquez avec le bouton droit de la souris sur le bouton d'action de l'extension et sélectionnez "Gérer les extensions", la page chrome://extensions défilera jusqu'à cette extension.

Déboguer la fenêtre contextuelle

Vous avez deux façons de déboguer la fenêtre contextuelle. Les deux méthodes sont en utilisant les Chrome DevTools.

Option 1: cliquez avec le bouton droit sur le bouton d'action de l'extension et choisissez Inspecter la fenêtre contextuelle.

Option 2: Ouvrez la fenêtre contextuelle directement dans votre navigateur sous forme d’onglet.

Par exemple, si votre identifiant d'extension est abcdefghijkmnop et que votre fichier html popup est popup.html . Allez à l'adresse et accédez à:

chrome-extension://abcdefghijklmnop/popup.html

Maintenant, vous voyez le groupe en onglet régulier. Et vous pouvez appuyer sur F12 pour ouvrir les outils de développement.