How to check canvas frames

Question

I just saw a link on how to check the "canvas frame" in Chrome Dev tools, but how to do it on Chrome extensions?

I think the chrome.debugger.sendCommand method should be used here.

How to do this in Chrome extensions?

EDIT: Normally, I want to verify this data using a Chrome debugger or some similar method without interacting with JavaScript code.

Answer 1

The Canvas pilot test feature has been removed from Chrome 44 ( crbug.com/475808 ). It was implemented by capturing calls to the canvas methods on the page.

I previously used this Canvas validation function to create smaller test cases for <canvas> errors. Upon learning of the removal of the Canvas validation function, I developed a new tool for capturing canvas snapshots. This tool intercepts all the canvas commands and saves the result in a 2D context, and also offers a method for retrieving all the teams played so far. The tool and documentation are available at https://github.com/Rob--W/canvas-interceptor .

Currently, only a subset of the 2D canvas APIs are captured because not all kinds of parameters are serialized. Everything that is not implemented is marked as TODO in the source code , so if you want to use this tool, feel free to submit tensile requests to fill in the missing parts.

To use this tool in an extension, enter the code on the page through the content script using run_at document_start . Since maintaining the state of the canvas is quite expensive in terms of memory, I recommend inserting a script if necessary using the declarativeContent.RequestContentScript action.

Answer 2

EDIT: As shown in RobW's answer , the required functionality has been removed from Chrome.

The corresponding documentation is in the documents of the protocol for debugging tree vertices .

In particular, this is done through the LayerTree domain. Please note: since it is not in the officially supported version of the debugger protocol, it is subject to change without notice.

An API thread would presumably have to join the page, send a command to enable profiling, and then listen for relevant events.

You can see a sample of how the debugger works , and try to figure it out from the docs or sniff the actual remote debugging protocol on the Dev Tools WebSocket tool page.