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

в 8:30, , рубрики: canvas, console, debug, debugging, dev tools, developer tools, DevTools, display list, DisplayList, hierarchy, pixi.js, pixijs, WebGL, консоль, отладка, разработка, метки: ,

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

image

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

Demo

Demo | Demo Source

Возможности

Display List Inspector

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

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

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

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

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

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

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

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

P.S.

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

Ну и вообще, любой фидбек и запросы фич только приветствуются!

Автор: Flashist

Источник


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js