Ho appena visto questo link, su come ispezionare i "telai di tela" su Chrome Dev Tools, ma come farlo sulle estensioni di Chrome?Come ispezionare i telai di tela
Penso che il metodo chrome.debugger.sendCommand dovrebbe essere usato qui.
Come fare su Chrome Extensions?
MODIFICA: di solito desidero controllare questi dati utilizzando il debugger di Chrome o un metodo simile, senza interagire con il codice JavaScript.
MODIFICA: come mostrato in RobW's answer, la funzionalità richiesta è stata rimossa da Chrome.
La documentazione pertinente è tip-of-the-tree debugging protocol docs.
In particolare, questo viene fatto tramite il dominio LayerTree. Nota: poiché non è in una versione ufficialmente supportata del protocollo debugger, è soggetto a modifiche senza preavviso.
Il flusso con l'API presumibilmente sarebbe quello di allegare alla pagina, inviare un comando per abilitare la profilazione e quindi ascoltare gli eventi appropriati.
È possibile vedere a sample of how Debugger works e provare a capirlo dai documenti o annusare il protocollo effettivo tramite il traffico WebSocket di una pagina Dev Tools per remote-debugging.
La funzionalità di ispezione Canvas sperimentale è stata rimossa da Chrome 44 (crbug.com/475808). È stato implementato catturando le chiamate ai metodi canvas nella pagina.
In precedenza ho utilizzato questa funzione di ispezione su tela per creare casi di test ridotti per i bug <canvas>. Dopo aver scoperto la rimozione della funzione di ispezione della tela, ho sviluppato un nuovo strumento per catturare istantanee della tela. Questo strumento intercetta tutti i comandi di canvas e memorizza il risultato nel contesto 2D e offre anche un metodo per recuperare tutti i comandi eseguiti fino a quel momento. Lo strumento e la documentazione sono disponibili allo https://github.com/Rob--W/canvas-interceptor.
Attualmente, viene catturato solo un sottoinsieme delle API canvas 2D, poiché non tutti i tipi di parametri sono ancora serializzati. Tutto ciò che non è implementato è marked as TODO in the source code, quindi se vuoi costruire su questo strumento, sentiti libero di inviare richieste di pull per riempire le parti mancanti.
Per utilizzare questo strumento in un'estensione, inject the code in the page tramite uno script di contenuto con run_atdocument_start. Poiché il salvataggio dello stato della tela è piuttosto costoso in termini di memoria, si consiglia di inserire lo script solo quando necessario utilizzando l'azione declarativeContent.RequestContentScript.
+1 Per l'area interceptor, ma si tratta di un'iniezione di codice, quindi non voglio in alcun modo inserire del codice nel contesto della pagina e il sito non dovrebbe sapere che esiste un'iniezione di codice. Di solito voglio ispezionare questi dati utilizzando il debugger di Chrome o un metodo simile, senza interagire con il codice JavaScript –
@wZVanG La funzione di ispezione della tela (ora rimossa) utilizzava anche l'iniezione di codice. È possibile progettare la funzionalità in modo tale che sia praticamente non rilevabile dalla pagina (simile alla domanda su WebSockets - http://stackoverflow.com/a/31182643), ma ciò richiede un sacco di sforzi. Se vuoi davvero essere non rilevabile al codice JavaScript della pagina, devi compilare una versione personalizzata di Chrome o Firefox. –
Questo è esattamente ciò che voglio fare, creare una versione personalizzata di Chrome, in modo che le mie esigenze possano essere risolte in generale. Gli utenti non avranno problemi a scaricare una versione di Chrome. Ad esempio, attualmente i miei utenti devono installare Chrome Dev. So che non è questa la domanda, ma potresti darmi un'idea di come iniziare a farlo? –
qualche idea per farlo sullo sfondo? –
Il _idea_ è dato nella risposta. Non ho il codice attuale. Una combinazione di lettura dei documenti e reverse-engineering del protocollo tramite debug remoto dovrebbe darvi l'idea di quali comandi/eventi vengono scambiati. – Xan
Grazie. Ho provato questo metodo 'LayerTree.enable' con [questa semplice tela] (http://fiddle.jshell.net/wsek4yf4/1/show/light/) ei risultati sono: [http://i.imgur.com /HwLxtjW.png](http://i.imgur.com/HwLxtjW.png) Ora, in questo caso, come è possibile ricompilare le modifiche di 'canvas.drawImage'? –