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

image

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

Demo


Demo | Demo Source

Возможности


Display List Inspector


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

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



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

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



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


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

P.S.


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

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

Комментарии (8)


  1. kozyabka
    30.08.2016 13:36
    #9778812

    Чуть оффтоп. Для флеша удобный инструмент, может возьмёте пару идей там — http://www.monsterdebugger.com/


    1. Flashist
      30.08.2016 13:40
      #9778816

      Спасибо, что напомнили про этот инструмент, когда-то давно пользовался им, но потом полностью перешёл на Flash-Console (кстати последний раз, когда я использовал MonsterDebugger, там была отдельная кнопочка для Flash-Console).

      На ваш взгляд, какие из функций MonsterDebugger могут быть полезны для отладки Canvas-приложений?


  1. zonex5
    30.08.2016 14:48
    #9778920

    Если работает на Pixi то должно заработать и для Phaser, я правильно понимаю?


    1. Flashist
      30.08.2016 14:49
      #9778924

      Хороший вопрос) Я не пробовал, но если Phaser работает с «чистым» Pixi.js, и через него можно получить доступ к инстансу PIXI.SystemRenderer и главному контейнеру (если там есть такое понятние), то должно работать.


  1. clamaw
    30.08.2016 16:59
    #9779104
    +2

    Мда, заголовочек лукавит. Даже расстроился чуть-чуть. Сторого говоря, с canvas и (тем более) webgl инструмент ничего общего не имеет.


    1. Flashist
      30.08.2016 17:30
      #9779154

      Поправил заголовок (если коротко, то консоль можно подружить с любой JS графической библиотекой, которая работает с Canvas/WebGL, поэтому лукавства не было, неправильно подобрал заголовок). Вам, как и DrReiz спасибо за то, что подсказали, как исправить заголовок.


  1. DrReiz
    30.08.2016 17:22
    #9779140
    +2

    Поменяйте заголовок на «инструмент для отладки Canvas/WebGl в Pixi.js». Имхо, на хабре не стоит разводить желтые заголовки.


    1. Flashist
      30.08.2016 17:27
      #9779150
      +2

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

      Жёлтых заголовков и тем более обманов кого-то делать не планировалось: просто не совсем правильно подобрал заголовок (но спасибо, что подсказали, как его улучшить)