web-dev-qa-db-fra.com

Déboguez popup.html d'une extension Chrome?

Je crée une extension Chrome et j'ai besoin d'afficher le code HTML/CSS/JS du popup.html.

Je ne peux pas cliquer avec le bouton droit pour inspecter les éléments. Y a-t-il un autre moyen? Je dois m'assurer que CSS et JavaScript sont correctement insérés. Comment déboguer un problème dans ce fichier popup?

javascriptdebugginggoogle-chrome-extension
52
Skizit

Cliquez avec le bouton droit sur le bouton de l'extension, puis sur "Inspecter la fenêtre contextuelle"

74
TimCodes.NET

Inspecter Popup a disparu avec la dernière version.

Voici comment déboguer Chrome Popups d'extension.

  1. Cliquez sur votre bouton contextuel pour voir la page Web (la fenêtre contextuelle elle-même).
  2. Cliquez avec le bouton droit dans la fenêtre et sélectionnez Inspecter l'élément
  3. La fenêtre Chrome Debugger affiche le bon contexte, mais vous avez déjà manqué vos points d'arrêt et vos instructions debugger.
  4. VOICI LE TRUC. Cliquez sur la partie Console du débogueur et tapez: location.reload(true) et appuyez sur Entrée.

Maintenant, vos points d'arrêt sont atteints! Excellent moyen de recharger les scripts modifiés sans revoir la page Extension.

76
Tom N

Une autre façon peut être de trouver l'ID: pour votre application dans chrome: // chrome/extensions /

Vous pouvez ensuite charger votre popup dans une fenêtre standard en

chrome-extension://id_of_your_application/popup.html

Échangez popup.html pour le fichier que vous avez spécifié dans manifest.json sous la propriété "default_popup".

24
Pavel Hlobil

Oui, "Inspecter la fenêtre contextuelle" sur l'icône de l'extension, et à part cela - à partir du gestionnaire d'extensions, vous pouvez également inspecter votre page d'options.

2
aCode

Essayez de basculer DevTools à ouverture automatique pour les popups en bas à droite de DevTools Paramètres :

Auto-open DevTools

Une autre bonne façon d'inspecter Javascript faisant partie de la fenêtre d'extension est d'ajouter des commentaires spéciaux à la fin du script à déboguer:

// @sourceURL=popup.js

C'est de facto une directive pour DevTools pour inclure ce fichier spécifique dans Onglet Sources . De là, vous pouvez inspecter le code, ajouter des points d'arrêt, la sortie vers la console, etc. comme d'habitude.

0
hypers