1. 首页
  2. 问答
  3. HTML5画布检查器？

HTML5画布检查器？

2012-02-04 52 views
21

是否有能力检查呈现在HTML5画布上的对象，就像我们在Silverlight和Silverlight间谍中所做的一样？HTML5画布检查器？

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

来源

2012-02-04 mastak

+0

JavaScript并不是HTML。我更新了你的问题。 – Jonas 2012-02-04 18:22:09

+0

开发者工具（Ctrl + Shift + J）下的谷歌浏览器的配置文件标签可能会有所斩获。我从来没有尝试过画布。 – Ryan 2012-02-04 18:23:54

+0

@minitech：通过配置文件选项卡，您可以查看JavaScript CPU和堆的使用情况;它与屏幕上显示的内容没有任何关系。 – josh3736 2012-02-04 18:26:40

回答

42

编辑： 这个回答不上新的Chrome版本一起看： chrome canvas inspector 2015

在Chrome Canary版：

    在浏览器中
  1. ，输入这个网址chrome://flags/
  2. 使启用开发工具实验
  3. 重新启动Chrome
  4. 在开发工具，点击“齿轮”带动了开发者的偏好
  5. 选择实验从菜单
  6. 选择帆布检查
  7. 接近devtools，刷新网页，重新打开devtools

在画布上探查完整指南： http://www.html5rocks.com/en/tutorials/canvas/inspection/

GIF动画显示在用行动表明： https://twitter.com/umaar/status/480705624448045057

来源

2013-01-22 19:53:59 jedierikb

+0

在我的Chrome版本'24 .0.1312.56米'或铬金丝雀它不存在：.. – mastak 2013-01-23 10:21:33

+1

更新说明。它是一个有点复杂的过程。 – jedierikb 2013-01-23 15:11:00

+6

有一个原因为什么这将奇迹般消失吗？我有它在金丝雀和香草，一天poof工作。启用，没有探查器，没有画布检查？ – pailhead 2015-04-18 03:35:31

10

画布的内容不是DOM的一部分，因此您无法检查它的内容。正如您已经正确指出的那样，检查员只能检查DOM，因此画布已经超出了范围。您可以检查画布内容在devtools的控制台虽然与

yourcanvas.toDataURL();

并检查输出dataURL在邻近的标签。

来源

2012-02-04 18:38:14 spliter

+3

画布是位图：它的内容只是你在屏幕上看到的内容 – 2012-02-04 19:39:11

+1

不太确定最后一条评论的内容是什么，谢谢@spliter - 这对调试非常有用！ – UpTheCreek 2012-10-10 22:09:18

1

将画布视为ms画。没有物体，只有像素和方法可以将它们放在屏幕上。

来源

2012-02-04 18:50:46 rezoner

2

没有办法检查的那一刻画布内容，但在WebGL的情况下，你可以使用“WebGL Inspector”扩展为谷歌Chrome，所以我觉得有可能作出类似的扩展画布太。但它不像常见的DOM检查器那样工作。

这里是WebGL的督察特点：

  • 扩展现有应用程序中有一个脚本注入网页
  • 嵌入包括
  • 捕获整个GL帧
  • 注释的通话记录与步进/资源导航和多余呼叫警告
  • 像素历史记录 - 查看所有对像素+混合信息作出贡献的绘图调用
  • GL状态显示
  • 资源浏览器的纹理，缓冲区和程序

但愿我不是越野，但在目前没有位图或矢量图帆布检查。

来源

2012-02-04 19:37:31 sysop

7

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

正如很多人所做的那样，您可以跟踪您在画布上绘制的内容，以便拥有用于重绘的持久对象。我写了几个popular tutorials on that，毫无疑问，如果你搜索，你会发现更多。

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

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

来源

2012-02-04 19:40:48

+2

正确..没有浏览器支持帆布检查呢..只有一种方法使用正确的框架，如[Kohana]（http://alertdevelop.ru/projects/profilertoolbar） – mastak 2012-02-29 10:05:19

相关问题

 相关问题