HTML5 画布检查器？

Posted 2023-03-06

【中文标题】HTML5 画布检查器？

【英文标题】：HTML5 canvas inspector?

【发布时间】：2012-02-26 22:19:34

【问题描述】：

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

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

【问题讨论】：

javascript 不是 HTML。我更新了你的问题。

Google Chrome 的“开发者工具”(Ctrl+Shift+J) 下的“个人资料”选项卡可能会起到作用。不过我从来没有尝试过画布。

@minitech：profiles 选项卡可以让您查看 JavaScript CPU 和堆使用情况；它与屏幕上呈现的内容没有任何关系。

@josh3736：对不起，我以为 OP 是画布分析，没关系：P

【参考方案1】：

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

yourcanvas.toDataURL();

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

【讨论】：

画布是位图：它的内容只是你在屏幕上看到的内容

不太清楚最后一条评论有什么帮助，谢谢@spliter - 这对调试很有帮助！

这可能不是 OP 想要的，但这正是我需要的，谢谢！

这必须是公认的答案！

【参考方案2】：

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

【参考方案3】：

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

这是 WebGL Inspector 的功能：

用于注入页面的扩展 使用单个脚本嵌入现有应用程序中 捕获整个 GL 帧 带注释的通话记录，带有步进/资源导航和冗余通话警告 像素历史记录 - 查看所有有助于像素 + 混合信息的绘制调用 GL 状态显示 纹理、缓冲区和程序的资源浏览器

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

【讨论】：

嗨@sysop，我无法在 chrome 设置中找到它，不确定谷歌是否已更改它。 pl。告诉我

【参考方案4】：

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

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

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

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

【讨论】：

正确.. 还没有浏览器支持画布检查.. 只有一种方法可以使用正确的框架，如 Kohana

【参考方案5】：

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

在 Chrome 金丝雀中：

在您的浏览器中，输入此网址chrome://flags/ 启用启用开发者工具实验 重新启动 Chrome 在开发者工具中，点击gear 调出开发者偏好设置 从菜单中选择实验 选择画布检查 关闭 devtools，刷新页面，重新打开 devtools

---

画布分析器的完整指南： http://www.html5rocks.com/en/tutorials/canvas/inspection/

动画 gif 显示它的动作： https://twitter.com/umaar/status/480705624448045057

【讨论】：

这是否会奇迹般地消失？我让它在金丝雀和香草中都起作用，一天便便。开发工具实验仍然启用，没有分析器，没有画布检查？

@Alex - 在最新版本的 Canary 中，这意味着 Settings 右上角的 3 个垂直点（或使用 F1）。

正如@pailhead 指出的那样，这似乎在最新版本中不可用——我在49.0.2621.0 canary (64-bit) 中看不到这一点。我认为 Firefox Canvas 调试器可能工作得还不错……但能把它找回来会很好

我在最新版本的 chrome 中找不到“启用开发人员工具实验”选项，可能名称已更改，请帮我找到使用画布检查的替代选项。

自 21 年 4 月 26 日起，Canvas Inspections 不再是 Experiments 下的选项。