Hoe Firefox-webontwikkelaarstools te gebruiken om websitestructuren in 3D te bekijken

Firefox 11 heeft twee nieuwe webontwikkelaarstools toegevoegd aan het al indrukwekkende arsenaal van Firefox. De Tilt-functie visualiseert websitestructuren in 3D, terwijl de Style Editor CSS-stylesheets direct kan bewerken.

De 3D-functie, bekend als Tilt, is een manier om de DOM van een website te visualiseren. Het integreert met de bestaande Document Inspector en gebruikt WebGL om rijke 3D-afbeeldingen in uw browser weer te geven.

Tilt - 3D-website Visualisatie

U hebt toegang tot Tilt vanuit Firefox's Paginainspector. Om aan de slag te gaan, opent u de Pagina-infovenster door "Inspecteren" te selecteren in het menu Web-ontwikkelaar. U kunt ook met de rechtermuisknop op de huidige pagina klikken en "Inspect Element" selecteren om de inspector voor een specifiek element te starten.

Klik op de knop "3D" op de werkbalk van de inspecteur.

Je ziet de structuur van de pagina na het activeren van de 3D-modus, maar het ziet er plat uit totdat je het roteert.

Roteer het model door met de linkermuisknop te klikken, verplaats de afbeelding met de rechtermuisknop en zoom in en uit met behulp van het muiswiel.

Deze weergave is geïntegreerd met de andere hulpprogramma's in de inspector. Als u de HTML- of stijlvensters hebt geopend, kunt u op een element op de pagina klikken om de HTML-code of CSS-eigenschappen van dat element te bekijken.

Meer 3D-functies

De 3D-visualisatiefunctie was gebaseerd op de Tilt-extensie, maar heeft niet alle functies van de Tilt-extensie. Als u de kleuren wilt aanpassen of de visualisatie zelfs wilt exporteren als een 3D-modelbestand voor gebruik met een 3D-bewerkingsprogramma, moet u de Tilt 3D-add-on installeren. Zodra je dit hebt gedaan, krijg je een nieuwe "Tilt" -optie in het Web Developer-menu.

Klik op de knop Annuleren om de oude versie van Tilt te gebruiken wanneer daarom wordt gevraagd.

U vindt besturingselementen om de visualisatie aan de linkerzijde van het venster aan te passen en andere opties, waaronder de exportfunctie, bovenaan de pagina.

CSS Style Editor

Als u de CSS-stijlpagina's van een pagina wilt bekijken en bewerken, opent u de Stijleditor in het menu Webontwikkelaar.

De Style-editor somt de stylesheets op de huidige pagina op. Schakel een stylesheet in of uit door op het oogpictogram links van de naam van het stylesheet te klikken. Bewerk een stylesheet door deze te selecteren en de code aan te passen.

Wijzigingen worden onmiddellijk op de pagina weergegeven. Als u een stylesheet uitschakelt, verliest de pagina zijn stijlinformatie. Als u een stylesheet bewerkt, ziet u de bewerkingen op de pagina verschijnen terwijl u typt.

U kunt een kopie van een van de stylesheets opslaan op uw computer, een bestaande stylesheet importeren van uw computer of een nieuwe, lege stylesheet toevoegen met de koppelingen Opslaan, Importeren of Nieuw in het venster Style Editor.

De 3D-visualisatiefunctie bewaakt veranderingen op de huidige pagina en merkt wanneer wijzigingen optreden. Wanneer u de stijleditor gebruikt terwijl de 3D-inspecteur is geopend, worden uw wijzigingen direct in de 3D-weergave weergegeven. Dit werkt ook met extensies van derden die webpagina's wijzigen, zoals Firebug.