javascript - Canvas, WebGL debugging functionality does not exist in 2019 browser? - Stack Overflow

admin管理员组

文章数量:1316561

I need to get more detailed information in order to pare 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 mon 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)?

I need to get more detailed information in order to pare 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 mon 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)?

• javascript
• html
• canvas
• browser
• webgl

Share Improve this question Follow edited Jul 4, 2019 at 21:07 asked Jul 4, 2019 at 18:25 user11719549user11719549 2

• I use safari 12.1.1 and i have cavas tab ? – Nikola Lukic Commented Jul 11, 2019 at 7:33
• Just as a reference: It was removed bugzilla.mozilla/show_bug.cgi?id=1403938 with Firefox 67 in 2019 – HolgerJeromin Commented Aug 12, 2020 at 11:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I remend 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 mand 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./webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk

本文标签： javascriptCanvasWebGL debugging functionality does not exist in 2019 browserStack Overflow