Как да използваме инструментите за уеб разработчици на Firefox за преглед на структурите на уебсайтовете в 3D
Firefox 11 добави два нови инструмента за уеб разработчици към вече впечатляващия арсенал на Firefox. Функцията Tilt визуализира структурите на уебсайтовете в 3D, докато редакторът на стил може да редактира CSS стиловете в движение.
3D функцията, известна като Tilt, е начин за визуализиране на DOM на уебсайт. Той се интегрира със съществуващия документ Инспектор и използва WebGL за показване на богати 3D графики във вашия браузър.
Наклон - 3D визуализация на уебсайта
Можете да получите достъп до Tilt от инспектора на страницата на Firefox. За да започнете, отворете Page Inspector, като изберете "Inspect" от менюто Web Developer. Можете също да щракнете с десния бутон на мишката върху текущата страница и да изберете “Inspect Element”, за да стартирате инспектора в определен елемент.
Кликнете върху бутона „3D“ на лентата с инструменти на инспектора.
Ще видите структурата на страницата след активирането на 3D режима, но тя ще изглежда плоска, докато не я завъртите.
Завъртете модела, като щракнете с левия бутон на мишката, преместете изображението наоколо, като щракнете с десния бутон на мишката, и увеличете и намалете с помощта на колелото на мишката.
Този изглед е интегриран с другите инструменти на инспектора. Ако панелите HTML или Style са отворени, можете да кликнете върху елемент на страницата hte, за да видите HTML кода или свойствата на CSS елемента.
Още 3D функции
Функцията за 3D визуализация се базира на разширението Tilt, но няма всички функции на разширението Tilt. ако искате да персонализирате цветовете или дори да експортирате визуализацията като файл с триизмерен модел за използване с програма за триизмерно редактиране, ще трябва да инсталирате добавката Tilt 3D. След като имате, ще получите нова опция „Наклон“ в менюто за уеб разработчици.
Щракнете върху бутона Отказ, за да използвате старата версия на Tilt, когато бъдете подканени.
Ще намерите контроли за персонализиране на визуализацията в лявата част на прозореца и други опции, включително функцията за експортиране, в горната част на страницата.
CSS стил редактор
За да прегледате и редактирате CSS стилови страници на страница, отворете Style Editor от менюто Web Developer.
Редакторът Стил изброява стиловете на текущата страница. Включете или изключете таблицата със стилове, като щракнете върху иконата на очите вляво от името на таблицата със стилове. Редактирайте стилова таблица, като я изберете и промените кода.
Промените се отразяват веднага на страницата. Ако изключите таблица със стилове, страницата ще загуби информацията за стила си. Ако редактирате таблица със стилове, ще видите, че редакциите се появяват на страницата, докато пишете.
Можете да запишете копие на един от стиловите таблици на компютъра си, да импортирате съществуваща таблица със стилове от компютъра си или да добавите нова, празна таблица със стилове със Запазване, Импортиране или Нови връзки в прозореца Редактор на стил..
Функцията за 3D визуализация наблюдава промените на текущата страница и отбелязва, когато се появят промени. Когато използвате редактора на стил с отворен 3D инспектор, промените ви ще се отразят веднага в 3D изгледа. Това работи и с разширения на трети страни, които променят уеб страници, като например Firebug.
