如何检查画布框架 [英] How to inspect Canvas Frames

问题描述

我刚刚看到了链接，介绍了如何检查画布框在Chrome开发工具，但如何做到这一点在Chrome扩展？

我认为 chrome.debugger.sendCommand 方法应该在这里使用。

< img src =https://i.stack.imgur.com/6yV15.pngalt =在这里输入图片描述>

如何在Chrome扩展上做到这一点？

编辑：我通常希望使用Chrome的调试器或类似的方法检查这些数据，而无需与JavaScript代码交互。 b4b

解决方案

实验性Canvas检测功能已从Chrome 44中移除（ crbug.com/475808 ）。它是通过捕获对页面中canvas方法的调用来实现的。

我以前使用此Canvas检查功能为< canvas> ; 错误。在发现删除Canvas检查功能后，我开发了一个新工具来捕获画布的快照。该工具拦截所有画布命令并将结果存储在2D上下文中，并提供一种方法来检索到目前为止播放的所有命令。该工具和文档可从 https://github.com/Rob--W/canvas-interceptor 获取。

目前，只有2D画布API的一部分被捕获，因为不是所有类型的参数都被序列化了。所有未实现的内容都是在源代码中标记为TODO的 ，所以如果你想建立这个工具，随时提交拉请求，以填补缺少的部分。

要在扩展中使用此工具，将代码注入通过内容脚本使用 run_at document_start 来创建页面。由于保存画布状态在内存方面相当昂贵，我建议只在需要时使用 declarativeContent.RequestContentScript 操作。

I just saw this link, about how to inspect "Canvas frames" on Chrome Dev Tools, but how to do it on Chrome extensions?

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

How to do it on Chrome Extensions?

EDIT: I usually want to inspect these data using Chrome's debugger or some similar method, without interacting with the JavaScript's code.

解决方案

The experimental Canvas inspection feature was removed from Chrome 44 (crbug.com/475808). It was implemented by capturing calls to canvas methods in the page.

I previously used this Canvas inspection feature to create reduced test cases for <canvas> bugs. Upon discovering the removal of the Canvas inspection feature, I developed a new tool to capture snapshots of the canvas. This tool intercepts all canvas commands and stores the result in the 2D context, and also offers a method to retrieve all commands played thus 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 every kind of parameter is serialized yet. Everything that is not implemented is marked as TODO in the source code, so if you want to build upon this tool, feel free to submit pull requests to fill in the missing parts.

To use this tool in an extension, inject the code in the page via a content script with run_at document_start. Since saving the canvas state is quite expensive in terms of memory, I recommend to only insert the script when needed by using the declarativeContent.RequestContentScript action.

这篇关于如何检查画布框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！