Инспектор холста HTML5?

EDIT: этот ответ не работает в новых версиях Chrome, см.: инспектор chrome canvas 2015

В Chrome Канарейка:

1. в браузере введите этот URL chrome://flags/
2. enable Включить эксперименты с инструментами разработчика
3. перезапустить Chrome
4. в инструментах разработчика нажмите gear, чтобы открыть настройки разработчика
5. выберите в меню эксперименты
6. выберите Проверки холста
7. закройте devtools, обновите страницу, снова откройте devtools

Полное руководство по профилировщику холста: http://www.html5rocks.com/en/tutorials/canvas/inspection/

Анимированный gif, показывающий это в действии: https://twitter.com/umaar/status/480705624448045057

Содержимое Canvas не является частью DOM, поэтому вы не можете проверить его содержимое. Как вы правильно заметили, инспекторы могут проверять только DOM, поэтому холст выходит за его рамки. Вы можете проверить содержимое холста в консоли ваших инструментов разработки, хотя с помощью

yourcanvas.toDataURL();

и проверьте выходной dataURL на соседней вкладке.

На холсте HTML5 нет объектов. Есть только пиксели. Когда вы рисуете фигуру, холст взмахивает палочкой, появляются пиксели, а потом он забывает, что вообще что-то произошло.

Как и многие другие, вы можете отслеживать, что вы рисуете на Canvas, чтобы иметь постоянные объекты для перерисовки. Я написал Нежное введение в создание интерактивного HTML5 Canvas, и, несомненно, если вы выполните поиск, вы найдете другие учебные пособия.

Когда вы создаете свою систему постоянных объектов, вы почти наверняка захотите включить много кода отладки, который выводит простые для понимания списки объектов и их координат. Многие люди предпочитают делать это с помощью операторов console.log, которые будут выводить любые строки, которые вы хотите, в консоль разработчика (часть инструментов разработчика F12 в большинстве современных браузеров).

Но это все. То, что вы строите, это то, что вы можете использовать для проверки вещей.

Нет возможности проверить содержимое холста на данный момент, но в случае WebGL вы можете использовать " WebGL Inspector " для Google Chrome, поэтому я думаю, что можно сделать аналогичное расширение и для Canvas. но это не работает как обычные инспекторы DOM.

Вот функции Инспектора WebGL:

• Расширение для вставки на страницы
• Встраивание в существующее приложение с помощью одного скрипта включает
• Захватите все кадры GL
• Аннотированный журнал вызовов с пошаговой навигацией/навигацией по ресурсам и избыточными предупреждениями о вызовах
• История пикселей — просмотр всех вызовов отрисовки, которые способствовали созданию пикселя + информация о смешивании.
• Отображение состояния GL
• Браузеры ресурсов для текстур, буферов и программ

Будем надеяться, что я не бездорожник, но на данный момент нет инспектора Bitmap или Vector Canvas.

Относитесь к холсту как к краске ms. Объектов нет, есть только пиксели и способы их размещения на экране.