Fconsole — Инструмент Для Отладки Приложений Pixi.js (Canvas/Webgl).

Буквально вчера я выложил в открытый доступ первую рабочую версию консоли для отладки приложений Canvas/WebGL. FКонсоль .

Если вы всегда хотели редактировать свойства визуальных объектов без изменения исходного кода, а также без труда просматривать всю иерархию визуальных объектов, то прошу под кат.

FConsole — инструмент для отладки приложений PIxi.js (Canvas/WebGL).
</p><p>

* На скриншоте показано Flash-консоль , который был взят в качестве примера при разработке FConsole



Демо

Демо | Демо-источник

Возможности



Инспектор списка отображения



Иерархия визуальных объектов
Позволяет просматривать иерархию визуальных объектов, находящихся под курсором.



FConsole — инструмент для отладки приложений PIxi.js (Canvas/WebGL).
</p><p>



Редактирование свойств
Позволяет редактировать свойства визуальных объектов без необходимости изменения исходного кода (например, может быть полезно при выравнивании объектов).



FConsole — инструмент для отладки приложений PIxi.js (Canvas/WebGL).
</p><p>



Совместимость

На данный момент консоль работает только с Pixi.js, но архитектура зависимостей предоставляет возможность расширения и написания адаптеров для разных графических движков.

Следующий запланированный адаптер — EaselJS.

P.S.

Это мой первый опыт работы в open-source проектах для HTML5/JS/Typescript, поэтому буду признателен, если сообщество подскажет очевидные недостатки, которые могут сразу броситься в глаза опытным разработчикам.

Ну и в целом любые отзывы и пожелания по функциям приветствуются! Теги: #pixi.js #pixi.js #canvas #webgl #debugging #debug #devtools #devtools #инструменты разработчика #список отображения #DisplayList #console #hierarchy #development #console #canvas #debugging

Вместе с данным постом часто просматривают: