Canvas, WebGL debugging functionality does not exist in 2019 browser?

Question

I need to get more detailed information in order to compare my Canvas, WebGL and other's Canvas, WebGL works.

So I looked for a feature that Canvas, WebGL can debug and investigate in the developer tool of the browser. Although Canvas and WebGL are common technologies, their debugging tools were not found very much.

---

According to their official site, Firefox introduced Canvas debugging tools in 2014, and WebKit introduced Canvas debugging tools in 2018.

• Canvas Debugging | WebKit

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

However, the latest versions of Firefox and Chrome do not have these features.

---

I saw a lot of threads on SO, but they were either "install an old browser" or "use someone else's extended debugging tool".

• 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

However, I do not want to install a browser that is too old. Also, the extension debugging tool that someone created was mostly unmaintained (example: WebGL-Inspector).

---

Are there any Canvas, WebGL debuggers or inspectors that I can currently use with the latest browsers (Firefox, Chrome)?

Answer 1

I recommend spector js as webGL inspector. It's chrome extension and allow you to make a snapshot of frame and then check a lot of useful informations like webGL command list, context info, states of renderer etc.

For example you can check how your frame is rendered draw call by draw call, it's useful during optimisation.

URL: https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk