Як використовувати інструменти веб-розробника Firefox для перегляду структур веб-сайтів у 3D

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

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

Нахил - 3D візуалізація веб-сайту

Доступ до Tilt можна отримати в межах Інспектора сторінок Firefox. Щоб розпочати роботу, відкрийте Інспектор сторінок, вибравши опцію "Перевірити" в меню Веб-розробник. Ви також можете клацнути правою кнопкою миші на поточній сторінці та вибрати "Перевірити елемент", щоб запустити інспектора на певному елементі.

Натисніть кнопку "3D" на панелі інструментів інспектора.

Після активації режиму 3D ви побачите структуру сторінки, але вона буде виглядати рівно, поки ви не повернете її.

Поверніть модель, клацнувши лівою кнопкою миші, перемістіть зображення навколо, клацнувши правою кнопкою миші, і збільшуйте та зменшуйте її за допомогою колеса миші.

Цей вигляд інтегрований з іншими інструментами інспектора. Якщо панелі HTML або Style відкриті, можна натиснути елемент на сторінці hte, щоб переглянути HTML-код або властивості CSS цього елемента.

Більше 3D-функцій

Функція 3D-візуалізації базувалася на розширенні Tilt, але не має всіх функцій розширення Tilt. якщо ви хочете налаштувати кольори або навіть експортувати візуалізацію як файл тривимірної моделі для використання з програмою редагування 3D, потрібно встановити додатковий компонент Tilt 3D. Після цього ви отримаєте нову опцію "Нахил" у меню веб-розробника.

Натисніть кнопку Скасувати, щоб використовувати стару версію Tilt під час запиту.

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

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

Для перегляду та редагування таблиць стилів CSS сторінки відкрийте редактор стилів у меню веб-розробника.

Редактор стилів відображає таблиці стилів на поточній сторінці. Увімкніть або вимкніть таблицю стилів, натиснувши на значок ока зліва від назви таблиці стилів. Відредагуйте таблицю стилів, вибравши її та змінивши код.

Зміни відображаються на сторінці негайно. Якщо ви вимкнете таблицю стилів, сторінка втратить інформацію про стиль. Якщо ви редагуєте таблицю стилів, ви побачите, що внесені зміни відображатимуться на сторінці під час введення тексту.

Можна зберегти копію однієї з таблиць стилів на комп'ютер, імпортувати існуючу таблицю стилів з комп'ютера або додати нову, порожню таблицю стилів за допомогою пунктів Зберегти, Імпортувати або Нові посилання у вікні редактора стилів.

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