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 on-the-fly 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 Visualization
U hebt toegang tot Tilt vanuit de Page Inspector van Firefox. Om te beginnen, opent u de Page Inspector door "Inspect" te selecteren in het Web Developer-menu. U kunt ook met de rechtermuisknop op de huidige pagina klikken en "Element inspecteren" selecteren om de inspecteur op een specifiek element te starten.
Klik op de knop "3D" op de werkbalk Inspector.
U ziet de structuur van de pagina nadat u de 3D-modus heeft geactiveerd, maar deze ziet er vlak uit totdat u deze draait.
Draai het model door met de linkermuisknop te klikken, verplaats de afbeelding door met de rechtermuisknop te klikken en zoom in en uit met het muiswiel.
Deze weergave is geïntegreerd met de andere tools in de inspecteur. Als u de HTML- of Stijlpanelen heeft 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 zelfs de visualisatie wilt exporteren als een 3D-modelbestand voor gebruik met een 3D-bewerkingsprogramma, moet u de Kantel 3D-add-on . Zodra u dit heeft gedaan, krijgt u een nieuwe "Kantelen" -optie in het menu Webontwikkelaars.
Klik op de knop Annuleren om de oude versie van Tilt te gebruiken wanneer daarom wordt gevraagd.
U vindt bedieningselementen om de visualisatie aan de linkerkant van het venster aan te passen en andere opties, inclusief de exportfunctie, bovenaan de pagina.
CSS-stijleditor
Om de CSS-stijlpagina's van een pagina te bekijken en te bewerken, opent u de Style Editor vanuit het menu Web Developer.
De stijleditor geeft een overzicht van de stylesheets op de huidige pagina. Schakel een stylesheet in of uit door op het oogpictogram links van de naam van de stylesheet te klikken. Bewerk een stylesheet door deze te selecteren en de code te wijzigen.
Wijzigingen worden onmiddellijk op de pagina weergegeven. Als u een stylesheet uitschakelt, verliest de pagina zijn stijlinformatie. Als je een stylesheet bewerkt, zie je de bewerkingen op de pagina verschijnen terwijl je typt.
U kunt een kopie van een van de stylesheets op uw computer opslaan, een bestaand stylesheet van uw computer importeren of een nieuw, leeg stylesheet toevoegen met de links Opslaan, Importeren of Nieuw in het venster Stijleditor.
De 3D-visualisatiefunctie let op wijzigingen op de huidige pagina en merkt op wanneer er wijzigingen optreden. Wanneer u de stijleditor gebruikt terwijl het 3D-infovenster open is, worden uw wijzigingen onmiddellijk weergegeven in de 3D-weergave. Dit werkt ook met extensies van derden die webpagina's wijzigen, zoals Firebug.
