Расширение Наклон для Firefox строит 3D-модель текущей веб-страницы, используя WebGL для быстрого рендеринга.
Таким образом, вы можете мгновенно проанализировать структуру страницы и взаимосвязи между различными частями.
Как вы знаете, с помощью объектной модели документа (DOM) любой HTML-документ можно представить в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текст, графику или другой объект. Это расширение строит такое дерево, накладывая на него текстуру текста и графику, расположенную в соответствующих узлах дерева.
Как показано на видео, помимо обычной визуализации, плагин показывает различную информацию о каждом узле (тип, id, класс или другие атрибуты) при клике правой кнопкой мыши.
Авторы расширения: Виктор Пороф (Главная часть), Седрик Вивье (отображение элементов DOM как текстур WebGL, что эквивалентно Canvas.drawWindow, см.
ошибку № 653656 ) И Роб Кэмпбелл (автор идеи).
Исходный код на гутхабе Блог разработчиков Последняя стабильная сборка: Tilt.xpi После установки расширения оно запускается нажатием комбинации клавиш Ctrl+Shift+L (или Cmd+Shift+L на Mac) или выбором соответствующего пункта меню в браузере; выйти, нажав клавишу Esc. Расширение работает на любой странице.
В будущем разработчики планируют добавить новые возможности, в том числе модификацию и обновление 3D-модели на лету (как только страница изменится, для каждого узла инициируется CSS-преобразование; плюс настройка отображения элементов, включая прозрачность).
и относительное положение 3D-узлов); рендеринг не только всей страницы, но и отдельных частей с помощью z-index; создание более удобных инструментов для веб-разработчиков; улучшенная интеграция с редактором Ace и инструментами разработчика Firefox (подсветка текущего выбранного узла, мгновенный предварительный просмотр 3D), экспорт 3D-графики в другие браузеры или приложения (через объектный 3D-файл, возможно, .
obj и/или COLLADA).
Самым большим прорывом станет возможность перехода между страницами в 3D, как в обычном 2D-режиме.
Полный список планов по улучшению расширения смотрите в списке TODO.md .
Теги: #tilt #dom #3d #dom-tree #z-index #CSS #Разработка сайтов
-
Выпущен Teamcity 4.0
19 Oct, 24
