我刚刚看到这个link，关于如何在 Chrome 开发工具上检查“画布框架”，但如何在 Chrome 扩展上进行检查？
我认为这里应该使用chrome.debugger.sendCommand方法。
如何在 Chrome 扩展上做到这一点？
编辑：我通常想使用 Chrome 的调试器或类似的方法检查这些数据，而不与 JavaScript 的代码进行交互。
【问题讨论】：
标签： javascript google-chrome-extension google-chrome-devtools
编辑：如RobW's answer 所示，所需功能已从 Chrome 中删除。
相关文档位于tip-of-the-tree debugging protocol docs。
具体来说，这是通过LayerTree 域完成的。请注意：由于它不在官方支持的调试器协议版本中，因此如有更改，恕不另行通知。
API 的流程大概是附加到页面，发送命令以启用分析，然后侦听适当的事件。
您可以查看a sample of how Debugger works，并尝试从文档中找出答案，或者通过remote-debugging 开发工具页面的WebSocket 流量来嗅探实际协议。
【讨论】：
LayerTree.enable这个方法，结果是：http://i.imgur.com/HwLxtjW.png现在，在这种情况下，如何重新编译canvas.drawImage变化？
LayerTree.replaySnapshot 应该这样做。
replaySnapshot返回dataUrl图片，但我想看看如何获取drawImage(img,x,y,w,h)调用的参数。在开发工具中：i.imgur.com/WUCaQif.png
实验性的 Canvas 检查功能已从 Chrome 44 (crbug.com/475808) 中移除。它是通过捕获页面中对画布方法的调用来实现的。
我之前使用此 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 操作插入脚本。
【讨论】：