HTML5 画布检查器? [英] HTML5 canvas inspector?

问题描述

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

Is there any ability to inspect the objects rendered on a HTML5 canvas like we can do in Silverlight with Silverlight Spy ?

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

If I use Chrome elements inspector I can inspect only DOM.

推荐答案

此答案不适用于新的 chrome 版本，请参阅:chrome canvas 检查器 2015

this answer doesn't work on new chrome versions see: chrome canvas inspector 2015

在 Chrome Canary 中:

In Chrome Canary:

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

<小时>

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

动画 gif 显示它在行动:https://twitter.com/umaar/status/480705624448045057

Animated gif showing it in action: https://twitter.com/umaar/status/480705624448045057

这篇关于HTML5 画布检查器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！