Firefox 11 додав два нові інструменти веб-розробника до Вже вражаючий арсенал Firefox . Функція Tilt візуалізує структури веб-сайтів у тривимірному режимі, тоді як редактор стилів може редагувати таблиці стилів CSS на льоту.
Функція 3D, відома як Tilt, - це спосіб візуалізації DOM веб-сайту. Він інтегрується з існуючим Інспектором документів і використовує WebGL для відображення розширеної тривимірної графіки у Вашому браузері.
Tilt - 3D візуалізація веб-сайтів
Ви можете отримати доступ до Tilt із Інспектора сторінок Firefox. Для початку відкрийте Інспектор сторінок, вибравши «Перевірити» в меню Веб-розробник. Ви також можете клацнути правою кнопкою миші на поточній сторінці та вибрати “Перевірити елемент”, щоб запустити інспектор на певному елементі.
Натисніть кнопку «3D» на панелі інструментів інспектора.
Після активації 3D-режиму ви побачите структуру сторінки, але вона буде виглядати рівною, доки ви не повернете її.
Поверніть модель, клацнувши лівою кнопкою миші, перемістіть зображення правою кнопкою миші та збільшуйте та зменшуйте масштаб за допомогою колеса миші.
Цей погляд інтегрований з іншими інструментами інспектора. Якщо у вас відкриті панелі HTML або Style, ви можете натиснути елемент на сторінці hte, щоб переглянути HTML-код цього елемента або властивості CSS.
Більше 3D-функцій
Функція 3D-візуалізації базувалася на розширенні Tilt, але вона не має усіх функцій розширення Tilt. якщо ви хочете налаштувати кольори або навіть експортувати візуалізацію як файл 3D-моделі для використання з програмою редагування 3D, вам потрібно буде встановити Додаток Tilt 3D . Після цього ви отримаєте нову опцію "Нахил" у меню веб-розробника.
Натисніть кнопку Скасувати, щоб використовувати стару версію Tilt, коли буде запропоновано.
Ви знайдете елементи керування для налаштування візуалізації в лівій частині вікна та інші параметри, включаючи функцію експорту, у верхній частині сторінки.
Редактор стилів CSS
Щоб переглянути та редагувати таблиці стилів CSS сторінки, відкрийте редактор стилів у меню Веб-розробник.
Редактор стилів перелічує таблиці стилів на поточній сторінці. Увімкніть або вимкніть таблицю стилів, клацнувши піктограму ока ліворуч від назви таблиці стилів. Відредагуйте таблицю стилів, вибравши її та змінивши код.
Зміни відображаються на сторінці негайно. Якщо вимкнути таблицю стилів, сторінка втратить інформацію про стиль. Якщо ви редагуєте таблицю стилів, ви побачите, що редагування з’являються на сторінці під час введення тексту.
Ви можете зберегти копію однієї з таблиць стилів на своєму комп’ютері, імпортувати існуючу таблицю стилів із комп’ютера або додати нову, порожню таблицю стилів за допомогою посилань Зберегти, Імпортувати або Нові у вікні Редактор стилів.
Функція 3D-візуалізації стежить за змінами на поточній сторінці та сповіщає про зміни. Коли ви використовуєте редактор стилів із відкритим інспектором 3D, ваші зміни негайно відображатимуться у тривимірному поданні. Це також працює зі сторонніми розширеннями, які модифікують веб-сторінки, наприклад Firebug.
