如何检查画布框架

Question

我刚看到这个link，关于如何检查＆＃34;画布框架＆＃34;在Chrome开发者工具上，但如何在Chrome扩展程序上执行此操作？

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

如何在Chrome扩展程序上执行此操作？

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

Answer 1

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

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

目前，只捕获了2D画布API的一部分，因为并非所有类型的参数都已序列化。所有未实现的内容都是marked as TODO in the source code，因此如果您想在此工具的基础上进行构建，请随时提交拉取请求以填写缺失的部分。

要通过包含run_at document_start的内容脚本在扩展程序inject the code in the page中使用此工具。由于在内存方面保存画布状态非常昂贵，我建议只在需要时使用declarativeContent.RequestContentScript操作插入脚本。

Answer 2

编辑：如RobW's answer所示，Chrome中删除了所需的功能。

相关文件位于tip-of-the-tree debugging protocol docs。

具体而言，这是通过LayerTree域完成的。请注意：由于它不在官方支持的调试器协议版本中，因此如有更改，恕不另行通知。

API的流程可能是附加到页面，发送命令以启用性能分析，然后监听适当的事件。

您可以看到a sample of how Debugger works，并尝试从文档中找出它，或者通过remote-debugging开发工具页面的WebSocket流量来嗅探实际协议。