30Jun

Jak používat nástroje webových vývojářů prohlížeče Firefox pro zobrazení webových struktur ve 3D

click fraud protection

Firefox 11 přidal dva nové nástroje webových vývojářů do již působivého arzenálu Firefoxu. Funkce Tilt zobrazuje struktury webových stránek ve 3D, zatímco Editor stylů může upravovat styly stylů CSS za běhu.

3D funkce, známá jako Tilt, je způsob vizualizace DOM webových stránek. Integruje se s existujícím Inspektor dokumentů a používá WebGL k zobrazení bohaté 3D grafiky ve vašem prohlížeči.

Tilt - 3D vizualizace webových stránek

Můžete získat přístup k Tiltu ze stránky Inspector Page Firefoxu. Chcete-li začít, otevřete stránku Inspector výběrem položky "Inspect" z nabídky Web Developer. Můžete také kliknout pravým tlačítkem myši na aktuální stránku a zvolit "Inspect Element" a spustit inspektor na určitém prvku.

Klepněte na tlačítko "3D" na panelu nástrojů inspektoru.

Struktura stránky se zobrazí po aktivaci režimu 3D, ale bude vypadat rovně, dokud ji neotočíte.

Otočení modelu kliknutím levým tlačítkem myši, přesunutím obrázku klepnutím pravým tlačítkem myši a přiblížením a oddáním pomocí kolečka myši.

instagram viewer

Tento pohled je integrován s ostatními nástroji v inspektoru. Pokud máte otevřené panely HTML nebo Styly, můžete klepnutím na prvek na stránce hte zobrazit HTML kód nebo vlastnosti CSS daného prvku.

Další 3D funkce

Funkce 3D vizualizace byla založena na rozšíření Tilt, ale nemá všechny funkce rozšíření Tilt.pokud chcete přizpůsobit barvy nebo dokonce exportovat vizualizaci jako 3D modelový soubor pro použití s ​​3D editačním programem, budete muset nainstalovat doplněk Tilt 3D.Až budete mít, dostanete novou volbu "Tilt" v nabídce Web Developer.

Klepnutím na tlačítko Storno použijete starou verzi nástroje Tilt po výzvě.

V levém okně se nacházejí ovládací prvky pro přizpůsobení vizualizace a další možnosti včetně funkce exportu v horní části stránky.

Editor stylu CSS

Chcete-li zobrazit a upravit seznam stylů stránky CSS, otevřete Editor stylů z nabídky Web Developer.

Editor stylů uvádí seznam stylů na aktuální stránce. Chcete-li zapnout nebo vypnout styl stylu, klepněte na ikonu oka nalevo od názvu stylu. Upravte styl stylu tak, že jej vyberete a upravíte kód.

Změny se okamžitě zobrazují na stránce. Pokud přepnete styl stylu, stránka ztratí informace o stylu. Pokud upravujete styl stylu, zobrazí se během zadávání úprav na stránce.

Do počítače můžete uložit kopii jednoho ze stylů, importovat stávající styly z počítače nebo přidávat nový prázdný styl stylu pomocí odkazů Uložit, importovat nebo Nové v okně editoru stylů.

Funkce 3D vizualizace sleduje změny na aktuální stránce a upozorňuje na změny. Když používáte Editor stylů s otevřeným inspektorem 3D, vaše změny se okamžitě promítnou do zobrazení 3D.To také funguje s rozšířeními třetích stran, které upravují webové stránky, například Firebug.