Où lire les messages de la console de background.js dans une extension Chrome?

195

Je viens de commencer avec les extensions Google Chrome et je n'arrive pas à me connecter à la console à partir de mon arrière-plan js. Lorsqu'une erreur se produit (à cause d'une erreur de syntaxe, par exemple), je ne trouve pas non plus de message d'erreur.

Mon fichier manifeste:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js:

alert("here");
console.log("Hello, world!")

Lorsque je charge l'extension, l'alerte apparaît mais je ne vois rien enregistré dans la console. Qu'est-ce que je fais mal?

— grasaved
source

2

duplication possible de Comment déboguer le script d'arrière-plan de Google Chrome?

— ripper234

Veuillez sélectionner des messages ou des informations si la barre en surbrillance se trouve sur d'autres onglets, comme Aucun onglet sélectionné

— siluveru kiran kumar

377

Vous regardez au mauvais endroit. Les messages de la console consignés n'apparaissent pas dans la page Web, mais dans la page d'arrière-plan (invisible). Pour voir ces messages dans la console, procédez comme suit:

Visite chrome://extensions/.
Vous pouvez également cliquer avec le bouton droit de la souris sur l'icône de l'extension, puis cliquer sur "Gérer les extensions".

Activer le mode développeur
Cliquez sur le lien de votre page de fond (sous "Inspecter les vues").
La console développeur s'ouvre pour cette page .

Nouvelle interface utilisateur:

Ancienne interface utilisateur:

— Rob W
source

@RobW, je n'ai pas le bouton triangulaire pour développer l'extension et je ne vois aucune vue active. Cette réponse n'est-elle plus la solution pour la dernière version de Chrome ou est-ce que je manque quelque chose?

— gwg

1

@ggundersen J'ai mis à jour l'image. Le triangle a été supprimé, cette étape se produit désormais automatiquement lorsque le mode développeur est activé.

— Rob W

comment déboguer les scripts de contenu alors?

— SuperUberDuper

1

@SuperUberDuper Via les devtools dans l'onglet où s'exécute le script de contenu.

— Rob W

13

J'ai eu le même problème, dans mon cas, la journalisation était définie sur "Tout masquer" dans l'onglet de la console dans les outils de développement Chrome. Je n'avais même pas réalisé que c'était une option, et je ne me souviens pas l'avoir désactivée

— Michiel
source

7

Pour les followers qui souhaitent voir la console de débogage pour un "script de contenu" de leur extension chrome, il est disponible en faisant un "show developer console" normal puis utilisez la flèche déroulante pour sélectionner son "environnement javascript" alors vous aurez accès à ses méthodes, etc.

— rogerdpack
source

5

aditionellement

si vous voulez voir le content_scriptfichier js (lorsque la propriété "background" n'est pas définie) dans manifest.json

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

puis faites un clic droit sur l'icône de l'extension et cliquez sur Inspecter la fenêtre contextuelle et la fenêtre du développeur s'ouvre avec popup.html ouvert, vous voyez l'onglet console.

— diEcho
source

9

1) Cela ne répond pas à la question, 2) C'est tout simplement faux; content script enregistre les messages dans la console de la page sur laquelle il est injecté, c'est-à-dire l'onglet réel du navigateur. Je suppose que dans votre code, a popup.jsété réutilisé dans le popup.html, et en tant que tel, la sortie de cette copie va à l'endroit que vous avez mentionné. Mais c'est totalement trompeur.

— Xan

2

cette réponse m'aide à vérifier le journal de l'extension chrome qui s'exécute en tant que popup

— RashFlash

1

Semblable à la réponse de Michiel, j'avais également une configuration de console amusante: un filtre dont je ne me souviens pas:

Après avoir nettoyé le filtre, j'ai vu les messages.

— Tonio Liebrand
source

1

Si nous voulons lire les messages imprimés sur la console à partir de la page contextuelle, nous pouvons cliquer sur l'icône d'extension pour ouvrir la page contextuelle, puis faire un clic droit sur la page contextuelle n'importe où, un menu déroulant s'affiche, il suffit de cliquer sur le menu «Inspecter» pour ouvrez l'outil de développement. Notez que la page contextuelle doit continuer à s'ouvrir. S'il est fermé (par window.close ()), l'outil de développement sera également fermé.

— Jeton Yi
source

0

J'ai eu ce problème aussi. Il semble que ma page Web ne se mettait pas à jour avec le script nouvellement enregistré. Cela a été résolu en appuyant sur Ctrl+ actualiser (ou Ctrl+ F5) dans le navigateur Chrome.