Pull to refresh

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

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

image

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

Demo


Demo | Demo Source

Возможности


Display List Inspector


Иерархия визуальных объектов

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



Редактирование свойств

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



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


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

P.S.


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

Ну и вообще, любой фидбек и запросы фич только приветствуются!
Tags:pixi.jspixijscanvaswebgldebuggingdebugdevtoolsdev toolsdeveloper toolsdisplay listDisplayListconsolehierarchyразработкаконсоль
Hubs: Canvas Debugging
Total votes 28: ↑28 and ↓0 +28
Views6.5K

Popular right now

DevOps engineer
from 100,000 ₽SCHNEIDER GROUPСанкт-Петербург
Frontend developer React JS (удаленно)
from 150,000 ₽HelastelRemote job
HTML-5 разработчик
from 80,000 to 100,000 ₽PiRL VenturesСанкт-ПетербургRemote job
Experienced Frontend Developer (remote)
from 1,600 to 3,000 $datarocketsRemote job
Graphics engineer
to 300,000 ₽DiagnocatRemote job