30Jun
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 kunt Tilt openen vanuit Firefox's Pagina Inspector. Om aan de slag te gaan, opent u de Pagina Inspector door "Inspecteren" te selecteren in het Web Developer-menu. 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 activering van de 3D-modus, maar hij ziet er plat uit totdat je hem draait.
Draai 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 hulpmiddelen in de inspector. Als u de HTML- of stijlpanelen open hebt, 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 kenmerken 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 Style Editor in het menu Webontwikkelaar.
De Stijl-editor vermeldt de stylesheets op de huidige pagina. 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 op uw computer opslaan, een bestaande stylesheet importeren van uw computer of een nieuwe, lege stylesheet toevoegen met de koppelingen Opslaan, Importeren of Nieuwe in het venster Style Editor.
De 3D-visualisatiefunctie bewaakt veranderingen op de huidige pagina en merkt op wanneer er wijzigingen optreden. Wanneer u de stijleditor gebruikt terwijl de 3D-inspecteur is geopend, worden uw wijzigingen onmiddellijk in de 3D-weergave weergegeven. Dit werkt ook met extensies van derden die webpagina's wijzigen, zoals Firebug.