Как использовать инструменты веб-разработчика Firefox для просмотра структур веб-сайтов в 3D

Firefox 11 добавил два новых инструмента для веб-разработчиков в и без того впечатляющий арсенал Firefox. Функция Tilt визуализирует структуры веб-сайтов в 3D, а редактор стилей может редактировать таблицы стилей CSS на лету..

Функция 3D, известная как Tilt, представляет собой способ визуализации DOM веб-сайта. Он интегрируется с существующим инспектором документов и использует WebGL для отображения богатой трехмерной графики в вашем браузере..

Tilt - 3D визуализация сайта

Вы можете получить доступ к Tilt из инспектора страниц Firefox. Чтобы начать, откройте инспектор страниц, выбрав «Инспектировать» в меню веб-разработчика. Вы также можете щелкнуть правой кнопкой мыши на текущей странице и выбрать «Инспектировать элемент», чтобы запустить инспектор на конкретном элементе..

Нажмите кнопку «3D» на панели инструментов инспектора.

Вы увидите структуру страницы после активации режима 3D, но она будет выглядеть плоской, пока вы не поверните ее.

Поверните модель, щелкнув левой кнопкой мыши, переместите изображение, щелкнув правой кнопкой мыши, и увеличивайте и уменьшайте масштаб с помощью колесика мыши.

Это представление интегрировано с другими инструментами в инспекторе. Если у вас открыты панели HTML или Style, вы можете щелкнуть элемент на странице, чтобы просмотреть его HTML-код или свойства CSS..

Больше возможностей 3D

Функция 3D-визуализации была основана на расширении Tilt, но она не обладает всеми функциями расширения Tilt. Если вы хотите настроить цвета или даже экспортировать визуализацию в виде файла 3D-модели для использования с программой 3D-редактирования, вам необходимо установить дополнение Tilt 3D. После этого вы получите новую опцию «Наклон» в меню веб-разработчика..

Нажмите кнопку Отмена, чтобы использовать старую версию Tilt при появлении запроса..

Вы найдете элементы управления для настройки визуализации в левой части окна и другие параметры, включая функцию экспорта, в верхней части страницы..

CSS Style Editor

Чтобы просмотреть и отредактировать таблицы стилей CSS на странице, откройте редактор стилей из меню веб-разработчика.

Редактор стилей отображает таблицы стилей на текущей странице. Включите или выключите таблицу стилей, щелкнув значок глаза слева от имени таблицы стилей. Отредактируйте таблицу стилей, выбрав ее и изменив код.

Изменения отражаются на странице сразу. Если вы выключите таблицу стилей, страница потеряет свою информацию о стиле. Если вы отредактируете таблицу стилей, вы увидите, что изменения появятся на странице во время ввода.

Вы можете сохранить копию одной из таблиц стилей на своем компьютере, импортировать существующую таблицу стилей со своего компьютера или добавить новую пустую таблицу стилей с помощью ссылок «Сохранить», «Импорт» или «Новые» в окне редактора стилей..

Функция 3D-визуализации отслеживает изменения на текущей странице и замечает, когда происходят изменения. Когда вы используете редактор стилей с открытым 3D-инспектором, ваши изменения будут немедленно отражены в 3D-виде. Это также работает со сторонними расширениями, которые изменяют веб-страницы, такими как Firebug.