30Jun

Ako používať nástroje vývojára webových aplikácií prehliadača Firefox na zobrazenie webových štruktúr v režime 3D

Firefox 11 pridal dva nové nástroje na vývoj webových aplikácií do už pôsobivého arzenálu Firefoxu. Funkcia Tilt vizualizuje štruktúry webových stránok v 3D, zatiaľ čo Editor štýlov môže upravovať štýly CSS za behu.

Funkcia 3D, známa ako Tilt, je spôsob vizualizácie stránky DOM.Integruje sa s existujúcim kontrolórom dokumentov a používa WebGL na zobrazenie bohatej 3D grafiky v prehliadači.

Tilt - 3D vizualizácia webových stránok

Prístup k Tilt môžete získať zo stránky Page Inspector spoločnosti Firefox. Ak chcete začať, otvorte stránku Page Inspector výberom položky "Inspect" z ponuky Web Developer. Môžete tiež kliknúť pravým tlačidlom myši na aktuálnu stránku a vybrať položku "Inspect Element" a spustiť inšpektor na konkrétnom prvku.

Kliknite na tlačidlo "3D" na paneli s nástrojmi inšpektora.

Štruktúra stránky sa zobrazí po aktivácii 3D režimu, ale bude to vyzerať rovnomerne, kým ju nezmeníte.

Otočte model kliknutím ľavým tlačidlom myši, premiestnite obrázok kliknutím pravým tlačidlom myši a zväčšením a vzdiaľovaním pomocou kolieska myši.

Tento pohľad je integrovaný s ostatnými nástrojmi v inšpektorovi. Ak máte otvorené panely HTML alebo Štýl, môžete kliknúť na prvok na hte stránke a zobraziť HTML kód alebo vlastnosti CSS daného prvku.

Viac 3D funkcií

Funkcia 3D vizualizácie bola založená na rozšírení Tilt, ale nemá všetky funkcie rozšírenia Tilt.ak chcete prispôsobiť farby alebo dokonca exportovať vizualizáciu ako 3D modelový súbor pre použitie s 3D editačným programom, budete musieť nainštalovať doplnok Tilt 3D.Akonáhle to máte, dostanete novú možnosť "Tilt" v ponuke Web Developer.

Po stlačení tlačidla Zrušiť použite starú verziu náklonu.

Nasledujúce ovládacie prvky vám umožnia prispôsobiť vizualizáciu na ľavej strane okna a ďalšie možnosti vrátane funkcie exportu v hornej časti stránky.

Editor štýlov CSS

Ak chcete zobraziť a upraviť listy štýlov CSS stránky, otvorte Editor štýlov z ponuky Web Developer.

Editor štýlov zobrazuje zoznam štýlov na aktuálnej stránke. Kliknutím na ikonu oka naľavo od názvu šablóny štýlu zapnite alebo vypnite štýl. Upravte štýl šablóny výberom a úpravou kódu.

Zmeny sa okamžite premietnu na stránku. Ak vypnete štýl šablóny, stránka stratí informácie o štýle. Ak upravíte šablónu so štýlmi, na stránke sa počas zadávania zobrazia úpravy.

Do počítača môžete uložiť kópiu jedného zo štýlov štýlov, importovať existujúci štýl zo svojho počítača alebo do okna Editoru štýlov pridať nový, prázdny štýl s odkazmi Uložiť, importovať alebo Nové.

Funkcia 3D vizualizácie sleduje zmeny na aktuálnej stránke a upozorňuje na zmeny. Keď používate Editor štýlov s otvoreným inšpektorom 3D, vaše zmeny sa okamžite premietnu do zobrazenia 3D.To tiež funguje s rozšíreniami tretích strán, ktoré upravujú webové stránky, ako napríklad Firebug.