Canvas, функциональность отладки WebGL не существует в браузере 2019?

Question

Мне нужно получить более подробную информацию, чтобы сравнить мои Canvas, WebGL и другие Canvas, WebGL работает.

Итак, я искал функцию, которую Canvas, WebGL может отлаживать и исследовать в инструменте разработчика браузера. Хотя Canvas и WebGL являются распространенными технологиями, их инструменты отладки были найдены не очень.

---

Согласно их официальному сайту, Firefox представил инструменты отладки Canvas в 2014 году, а WebKit представил инструменты отладки Canvas в 2018 году.

• Отладка холста | WebKit

• Представляем Canvas Debugger в инструментах разработчика Firefox - Mozilla Hacks - блог веб-разработчика

Однако последние версии Firefox и Chrome не имеют этих функций.

---

Я видел много потоков в SO, но они были либо "установить старый браузер", либо "использовать чужой расширенный инструмент отладки".

• Как проверить рамки холста
• Инспектор холста HTML5?
• Инспектор хромового холста 2015
• Как в Chrome 51 как активировать функцию профилирования холста?
• Инструменты отладки WebGL?
• Отладчик шейдера Webgl, проверка переменных
• отладка webgl в chrome

Однако я не хочу устанавливать слишком старый браузер. Кроме того, созданный кем-то инструмент отладки расширений в основном не поддерживается (пример: WebGL-Inspector ).

---

Существуют ли какие-либо отладчики или инспекторы Canvas, WebGL, которые я могу использовать с последними браузерами (Firefox, Chrome)?

Answer 1

Я рекомендую Spector JS в качестве инспектора webGL. Это расширение Chrome, позволяющее сделать снимок кадра, а затем проверить много полезной информации, такой как список команд webGL, контекстную информацию, состояния рендерера и т. Д.

Например, вы можете проверить, как ваш кадр отображается при вызове отрисовки, это полезно при оптимизации.

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