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?
Cliquez avec le bouton droit sur le bouton de l'extension, puis sur "Inspecter la fenêtre contextuelle"
Inspecter Popup a disparu avec la dernière version.
Voici comment déboguer Chrome Popups d'extension.
- Cliquez sur votre bouton contextuel pour voir la page Web (la fenêtre contextuelle elle-même).
- Cliquez avec le bouton droit dans la fenêtre et sélectionnez Inspecter l'élément
- La fenêtre Chrome Debugger affiche le bon contexte, mais vous avez déjà manqué vos points d'arrêt et vos instructions
debugger
. - 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.
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".
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.
Essayez de basculer DevTools à ouverture automatique pour les popups en bas à droite de DevTools Paramètres :
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.