Ich habe gerade gesehen, link, wie Sie "Canvas Frames" in Chrome Dev Tools überprüfen, aber wie es in Chrome-Erweiterungen zu tun?So überprüfen Sie Canvas Frames
Ich denke, dass die chrome.debugger.sendCommand Methode hier verwendet werden sollte.
Wie es auf Chrome-Erweiterungen zu tun?
EDIT: Ich möchte diese Daten in der Regel mit dem Debugger von Chrome oder eine ähnliche Methode untersuchen, ohne mit dem JavaScript-Code zu interagieren.
BEARBEITEN: Wie in RobW's answer gezeigt, wurde die erforderliche Funktionalität aus Chrome entfernt.
Die entsprechende Dokumentation befindet sich unter tip-of-the-tree debugging protocol docs.
Dies geschieht speziell über die Domain LayerTree. Hinweis: Da es sich nicht um eine offiziell unterstützte Version des Debugger-Protokolls handelt, kann es ohne vorherige Ankündigung geändert werden.
Der Fluss mit der API würde vermutlich an die Seite anhängen, einen Befehl senden, um das Profiling zu aktivieren, und dann auf geeignete Ereignisse warten.
Sie können a sample of how Debugger works sehen und versuchen, es aus der Dokumentation herauszufinden oder schnüffeln das tatsächliche Protokoll von remote-debugging WebSocket-Verkehr einer Dev Tools-Seite.
Die experimentelle Canvas-Inspektionsfunktion wurde aus Chrome 44 (crbug.com/475808) entfernt. Es wurde implementiert, indem Aufrufe von Canvas-Methoden auf der Seite erfasst wurden.
Ich habe diese Canvas-Inspektionsfunktion zuvor verwendet, um reduzierte Testfälle für <canvas> Bugs zu erstellen. Nachdem die Entfernung der Canvas-Inspektionsfunktion erkannt wurde, habe ich ein neues Tool zum Erfassen von Snapshots der Zeichenfläche entwickelt. Dieses Tool fängt alle Canvas-Befehle ab und speichert das Ergebnis im 2D-Kontext und bietet außerdem eine Methode zum Abrufen aller bisher gespielten Befehle. Das Tool und die Dokumentation sind verfügbar unter https://github.com/Rob--W/canvas-interceptor.
Derzeit wird nur eine Teilmenge der 2D-Canvas-APIs erfasst, da nicht alle Parameter bereits serialisiert sind. Alles, was nicht implementiert wird, ist marked as TODO in the source code. Wenn Sie also auf diesem Tool aufbauen möchten, können Sie Pull-Requests senden, um die fehlenden Teile auszufüllen.
Um dieses Tool in einer Erweiterung zu verwenden, inject the code in the page über ein Inhaltsskript mit run_atdocument_start. Da das Speichern des Canvas-Zustands im Hinblick auf den Arbeitsspeicher ziemlich teuer ist, empfehle ich, das Skript nur bei Bedarf einzufügen, indem Sie die Aktion declarativeContent.RequestContentScript verwenden.
+1 Für den Interceptor Canvas, aber das ist eine Code-Injektion, also möchte ich keine Möglichkeit, etwas Code in den Seitenkontext zu injizieren, und die Website sollte nicht wissen, dass dort eine Code-Injektion. Normalerweise möchte ich diese Daten mit dem Debugger von Chrome oder einer ähnlichen Methode untersuchen, ohne mit dem JavaScript-Code zu interagieren. –
@wZVanG Die (jetzt entfernte) Canvas-Inspektionsfunktion verwendete auch Code-Injection. Sie können die Funktionalität so gestalten, dass sie von der Seite praktisch nicht erkannt wird (ähnlich wie bei Ihrer Frage zu WebSockets - http://stackoverflow.com/a/31182643), aber das erfordert viel Aufwand. Wenn Sie den JavaScript-Code der Seite wirklich nicht erkennen möchten, müssen Sie eine benutzerdefinierte Version von Chrome oder Firefox kompilieren. –
Das ist genau das, was ich tun möchte, eine angepasste Version von Chrome zu machen, damit meine Bedürfnisse im Allgemeinen gelöst werden können. Nutzer haben kein Problem, eine Chrome-Version herunterzuladen. Zum Beispiel müssen derzeit meine Nutzer Chrome Dev installieren. Ich weiß, dass das nicht die Frage ist, aber du könntest mir eine Idee geben, wie ich damit anfangen soll? –
keine Idee, es im Hintergrund zu tun? –
Die _idea_ ist in der Antwort angegeben. Ich habe keinen tatsächlichen Code. Eine Kombination aus dem Lesen der Dokumente und dem Reverse-Engineering des Protokolls durch Remote-Debugging sollte Ihnen die Idee vermitteln, welche Befehle/Ereignisse ausgetauscht werden. – Xan
Danke. Ich habe diese Methode 'LayerTree.enable' mit [dieser einfachen Leinwand] (http://fiddle.jshell.net/wsek4yf4/1/show/light/) versucht und die Ergebnisse sind: [http://i.imgur.com /HwLxtjW.png](http://i.imgur.com/HwLxtjW.png) Nun, in diesem Fall, wie kann 'canvas.drawImage' Änderungen neu kompiliert werden? –