HTML5 画布检查器？答案

【问题标题】：HTML5 canvas inspector?HTML5 画布检查器？
【发布时间】：2012-02-26 22:19:34
【问题描述】：

是否可以像在 Silverlight 中使用 Silverlight Spy 那样检查 HTML5 画布上呈现的对象？

如果我使用 Chrome 元素检查器，我只能检查 DOM。

【问题讨论】：

【解决方案1】：

Canvas 的内容不是 DOM 的一部分，因此您无法检查它的内容。正如您正确指出的那样，检查员只能检查 DOM，因此画布超出了它的范围。您可以在开发工具的控制台中检查画布的内容，尽管使用

yourcanvas.toDataURL();

并检查相邻选项卡中的输出数据URL。

【讨论】：

【解决方案2】：

将画布视为 ms 油漆。没有对象，只有像素和将它们放在屏幕上的方法。

【讨论】：

【解决方案3】：

目前无法检查画布内容，但如果是 WebGL，您可以使用 Google Chrome 的“WebGL Inspector”扩展名，所以我认为 这是可能的 也为 Canvas 做类似的扩展。但它不像普通的 DOM 检查器那样工作。

这是 WebGL Inspector 的功能：

希望我不是越野，但目前没有位图或矢量画布检查器。

【讨论】：

【解决方案4】：

在 HTML5 Canvas 上没有呈现任何对象。只有像素。当你绘制一个形状时，画布挥动它的魔杖，像素出现，然后它甚至忘记了任何事情发生。

正如许多人所做的那样，您可以跟踪您在 Canvas 上绘制的内容，以便拥有用于重绘的持久对象。我写了A Gentle Introduction to Making HTML5 Canvas Interactive，毫无疑问，如果你搜索你会找到其他教程。

在构建持久对象系统时，您几乎肯定会希望包含大量调试代码，这些代码会输出易于理解的对象列表及其坐标。很多人选择使用console.log 语句来执行此操作，该语句会将您想要的任何字符串输出到开发人员控制台（大多数现代浏览器中 F12 开发人员工具的一部分）。

但就是这样。你所建造的就是你用来检查事物的东西。

【讨论】：

【解决方案5】：

编辑： 此答案不适用于新的 chrome 版本，请参阅： chrome canvas inspector 2015

在 Chrome 金丝雀中：

【讨论】：

这是否会奇迹般地消失？我让它在金丝雀和香草中都起作用，一天便便。开发工具实验仍然启用，没有分析器，没有画布检查？
@Alex - 在最新版本的 Canary 中，这意味着 Settings 右上角的 3 个垂直点（或使用 F1）。
正如@pailhead 指出的那样，这似乎在最新版本中不可用——我在49.0.2621.0 canary (64-bit) 中看不到这一点。我认为 Firefox Canvas 调试器可能工作得还不错……但能把它找回来会很好
我在最新版本的 chrome 中找不到“启用开发人员工具实验”选项，可能名称已更改，请帮我找到使用画布检查的替代选项。
自 21 年 4 月 26 日起，Canvas Inspections 不再是 Experiments 下的选项。