web-dev-qa-db-fra.com

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

Je viens de commencer avec Google Chrome extensions 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 peux " t trouver aucun message d'erreur non plus.

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 qui soit consigné dans la console. Qu'est-ce que je fais mal?

debugginggoogle-chrome-extensionconsolegoogle-chrome-devtools
170
grasaved

Vous regardez au mauvais endroit. Les messages consignés de la console 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 du poste, puis cliquer sur "Gérer les postes".

  1. Activer le mode développeur
  2. Cliquez sur le lien de votre page d'arrière-plan (sous "Inspecter les vues").
  3. La console du développeur s’ouvre pour cette page .

Nouvelle interface utilisateur:

enter image description hereenter image description here

Ancienne interface utilisateur:

image

343
Rob W

J'ai eu le même problème, dans mon cas, la journalisation était réglée sur "Masquer tout" dans l'onglet de la console dans Chrome Outils de développement. Je n'avais même pas réalisé que c'était une option, et je peux Ne me souviens pas de l'avoir éteint

screenshot of setting in console tab in chrome dev tools

12
Michiel

Pour les abonnés qui souhaitent voir la console de débogage pour un "script de contenu" de leur extension chrome, il est disponible en effectuant une "console de développeur" normale, puis utilisez la flèche de déroulement pour le sélectionner " environnement javascript ", vous aurez alors accès à ses méthodes, etc.

enter image description here

5
rogerdpack

aditionellement

si tu veux voir content_script fichier 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 clic droit sur l'icône de l'extension et cliquez sur Inspection de la fenêtre contextuelle et la fenêtre du développeur s'ouvre avec le fichier popup.html ouvert. Vous y trouverez l'onglet de la console.

5
diEcho

J'ai eu ce problème aussi. Il semble que ma page Web ne soit pas mise à jour avec le script récemment enregistré. Ceci a été résolu en appuyant sur Ctrl + refresh (ou Ctrl + F5) dans le chrome navigateur.

1
Jordan

Semblable à la réponse de Michiel, j’ai aussi eu une configuration de console amusante: Un filtre dont je ne me souviens pas du réglage:

enter image description here

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

0
BigDataScientist