google-chrome-extension
Débogage des extensions Chrome
Recherche…
Utilisation des outils Developer pour déboguer votre extension
Une extension chromée est séparée en 4 parties maximum:
- la page de fond
- la page popup
- un ou plusieurs scripts de contenu
- la page d'options
Chaque partie, étant intrinsèquement séparée, nécessite un débogage individuel.
Gardez à l'esprit que ces pages sont séparées, ce qui signifie que les variables ne sont pas directement partagées entre elles et qu'une console.log() dans l'une de ces pages ne sera pas visible dans les journaux des autres parties.
En utilisant les devtools de chrome:
Les extensions Chrome sont déboguées comme pour les autres applications Web et les pages Web. Le débogage se fait le plus souvent à l'aide de l'inspecteur devtools de chrome ouvert en utilisant respectivement le raccourci clavier pour windows et mac: ctrl + shift + i et cmd + shift + i ou en cliquant avec le bouton droit sur la page et en sélectionnant inspect.
De l'inspecteur, un développeur peut vérifier les éléments HTML et la manière dont css les affecte, ou utiliser la console pour inspecter les valeurs des variables javascript et lire les sorties de n'importe quelle console.log() ) définie par les développeurs.
Vous trouverez plus d'informations sur l'utilisation de l'inspecteur sur Chrome Devtools .
Inspection de la fenêtre contextuelle, de la page d'options et des autres pages accessibles à l'aide de chrome: //.....votreExtensionId.../:
La page contextuelle et la page d' options peuvent être consultées en les inspectant simplement lorsqu'elles sont ouvertes.
Les pages HTML supplémentaires faisant partie de l'extension, mais qui ne sont ni la fenêtre contextuelle ni la page d'options, sont également déboguées de la même manière.
Inspection de la page de fond:
Pour accéder à votre page d'arrière - plan, vous devez d'abord accéder à la page d'extension chrome à l'adresse chrome: // extensions / . Assurez-vous que la case «Mode développeur» est activée. 
Cliquez ensuite sur votre script d’arrière-plan en regard de «Inspecter les vues» pour inspecter votre page d’arrière-plan. 
Inspection des scripts de contenu:
Les scripts de contenu sont exécutés le long des sites Web dans lesquels ils ont été insérés. Vous pouvez inspecter le script de contenu en inspectant d'abord le site Web où le script de contenu est inséré. Dans la console, vous pourrez voir tous les console.log() par votre extension, mais vous ne pourrez pas modifier ou inspecter les variables du script de contenu. 
Pour résoudre ce problème, vous devez cliquer sur le menu déroulant généralement défini sur 'top' et sélectionner votre extension dans la liste des extensions. 
De là, vous aurez accès aux variables de votre extension.