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

Оглавление:

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

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

Видео: Как использовать инструменты веб-разработчика Firefox для просмотра веб-сайтов в 3D
Видео: Как НАЙТИ и ОТКРЫТЬ браузер Internet Explorer в Windows 10/8/7 ? Ты Уверен? Он не тонет ! 😉 - YouTube 2024, Апрель
Anonim
Firefox 11 добавил два новых инструмента для веб-разработчиков в уже впечатляющий арсенал Firefox. Функция Tilt визуализирует структуры веб-сайтов в 3D, а редактор стилей может редактировать таблицы стилей CSS «на лету».
Firefox 11 добавил два новых инструмента для веб-разработчиков в уже впечатляющий арсенал Firefox. Функция Tilt визуализирует структуры веб-сайтов в 3D, а редактор стилей может редактировать таблицы стилей CSS «на лету».

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

Наклон - 3D-визуализация веб-сайта

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

Нажмите кнопку «3D» на панели инструментов инспектора.
Нажмите кнопку «3D» на панели инструментов инспектора.
После активации 3D-режима вы увидите структуру страницы, но она будет выглядеть ровной, пока вы ее не повернете.
После активации 3D-режима вы увидите структуру страницы, но она будет выглядеть ровной, пока вы ее не повернете.
Поверните модель, щелкнув левой кнопкой мыши, передвиньте изображение, щелкнув правой кнопкой мыши, а также увеличьте и уменьшите масштаб с помощью колеса мыши.
Поверните модель, щелкнув левой кнопкой мыши, передвиньте изображение, щелкнув правой кнопкой мыши, а также увеличьте и уменьшите масштаб с помощью колеса мыши.
Это представление интегрировано с другими инструментами в инспекторе. Если вы открыли панели HTML или Style, вы можете щелкнуть элемент на странице hte, чтобы просмотреть HTML-код этого элемента или свойства CSS.
Это представление интегрировано с другими инструментами в инспекторе. Если вы открыли панели HTML или Style, вы можете щелкнуть элемент на странице hte, чтобы просмотреть HTML-код этого элемента или свойства CSS.
Image
Image

Дополнительные функции 3D

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

Нажмите кнопку «Отмена», чтобы использовать старую версию Tilt при появлении запроса.
Нажмите кнопку «Отмена», чтобы использовать старую версию Tilt при появлении запроса.
Вы найдете элементы управления, чтобы настроить визуализацию в левой части окна и другие параметры, включая функцию экспорта, в верхней части страницы.
Вы найдете элементы управления, чтобы настроить визуализацию в левой части окна и другие параметры, включая функцию экспорта, в верхней части страницы.
Image
Image

Редактор стиля CSS

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

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

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

Рекомендуемые: