Comment inspecter les cadres en toile

Je viens de voir ce lien , sur la façon d'inspecter "Cadres de toile" sur les Outils de développement Chrome, mais comment le faire sur les extensions Chrome?

Je pense que la méthode chrome.debugger.sendCommand devrait être utilisée ici.

Entrez la description de l'image ici

Comment le faire sur les extensions Chrome?

EDIT: Je souhaite généralement inspecter ces données en utilisant le débogueur Chrome ou une méthode similaire, sans interagir avec le code JavaScript.

La fonction expérimentale d'inspection de toile a été supprimée de Chrome 44 ( crbug.com/475808 ). Il a été implémenté en capturant des appels vers des méthodes de toile dans la page.

J'ai déjà utilisé cette fonction d'inspection de toile pour créer des cas de test réduits pour les bugs <canvas> . Après avoir découvert la suppression de la fonction d'inspection de Canvas, j'ai développé un nouvel outil pour capturer des instantanés du canevas. Cet outil intercepte toutes les commandes de la toile et stocke le résultat dans le contexte 2D, et offre également une méthode pour récupérer toutes les commandes jouées jusqu'ici. L'outil et la documentation sont disponibles à l' adresse https://github.com/Rob–W/canvas-interceptor .

À l'heure actuelle, seul un sous-ensemble des API de toile 2D est capturé, car pas tous les types de paramètres sont encore sérialisés. Tout ce qui n'est pas implémenté est marqué comme TODO dans le code source , donc, si vous souhaitez développer cet outil, n'hésitez pas à soumettre des demandes de tirage pour remplir les pièces manquantes.

Pour utiliser cet outil dans une extension, injectez le code dans la page via un script de contenu avec run_at document_start . Puisque la sauvegarde de l'état de la toile est assez coûteuse en termes de mémoire, je recommande d'insérer le script uniquement lorsque j'utilise l'action declarativeContent.RequestContentScript .

EDIT: Comme le montre la réponse de RobW , la fonctionnalité requise a été supprimée de Chrome.

La documentation pertinente se trouve dans les documents de protocole de débogage de la pointe de l'arbre .

Plus précisément, cela se fait via le domaine LayerTree . Remarque: car ce n'est pas dans une version officiellement prise en charge du protocole du débogueur, il est sujet à changement sans préavis.

Le flux avec l'API devrait vraisemblablement être attaché à la page, envoyer une commande pour permettre le profilage et ensuite écouter les événements appropriés.

Vous pouvez voir un exemple de la façon dont fonctionne le débogueur , et essayer de comprendre les docs ou renifler le protocole réel en supprimant à distance un trafic WebSocket de la page Dev Tools.