2019浏览器不存在Canvas、WebGL调试功能？

Posted 2023-03-05

【中文标题】2019浏览器不存在Canvas、WebGL调试功能？

【英文标题】：Canvas, WebGL debugging functionality does not exist in 2019 browser?

【发布时间】：2019-11-15 11:38:22

【问题描述】：

我需要获取更详细的信息，以便比较我的 Canvas、WebGL 和其他人的 Canvas、WebGL 作品。

于是我在浏览器的开发者工具中找了一个Canvas，WebGL可以调试和调查的功能。虽然 Canvas 和 WebGL 是常用的技术，但它们的调试工具却很少被发现。

---

根据他们的官网，Firefox 在 2014 年推出了 Canvas 调试工具，WebKit 在 2018 年推出了 Canvas 调试工具。

Canvas Debugging | WebKit

Introducing the Canvas Debugger in Firefox Developer Tools - Mozilla Hacks - the Web developer blog

但是，最新版本的 Firefox 和 Chrome 不具备这些功能。

---

我在 SO 上看到了很多线程，但它们要么是“安装旧浏览器”，要么是“使用别人的扩展调试工具”。

How to inspect Canvas Frames html5 canvas inspector? chrome canvas inspector 2015 In Chrome 51, how can I activate the Canvas Profiling Feature? WebGL debug tools? Webgl shader debugger, variable inspection debugging webgl in chrome

但是，我不想安装太旧的浏览器。此外，某人创建的扩展调试工具大多未维护（例如：WebGL-Inspector）。

---

目前是否有任何 Canvas、WebGL 调试器或检查器可用于最新的浏览器（Firefox、Chrome）？

【问题讨论】：

我使用 safari 12.1.1 并且我有 cavas 标签？

仅供参考：它已于 2019 年随 Firefox 67 被删除 bugzilla.mozilla.org/show_bug.cgi?id=1403938

【参考方案1】：

我推荐使用 spector js 作为 webGL 检查器。它是 chrome 扩展，允许您制作帧快照，然后检查许多有用的信息，如 webGL 命令列表、上下文信息、渲染器状态等。

例如，您可以通过绘制调用检查帧是如何渲染绘制调用的，这在优化期间很有用。

网址：https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk