Developer Tools in Firefox Aurora 10
Geschreven door Kevin van Beers maandag, 05 december 2011 17:10
Mozilla is bezig een collectie van stabiele, snelle en gebruiksvriendelijke developer tools in te bouwen in zijn webbrowser. De release van de nieuwe Firefox zal rond 31 januari 2012 plaatsvinden.
Maar voor developers die niet kunne wachten bestaat er de mogelijkheid om al een preview te krijgen van deze tools door Firefox Aurora te downloaden. Deze versie van Firefox kun je gewoon naast je stabiele versie draaien. Hieronder een opsomming van de nieuwe features voor webdevelopers en de vraag of het wel de moeite waard is. Hebben we straks de firebug add-on niet meer nodig?
Pagina inspector
Door middel van de ingebouwde pagina inspector kun je snel de structuur en layout van een pagina bekijken. (Denk Firebug).Dit kun je doen door "inspect" te kiezen vanuit het "web developer" menu of door gebruik van de shortcut CTRL+SHIFT+I (CMD+SHIFT+I op een mac). Hier kun je het element van de pagina selecteren waar je meer informatie over zou willen hebben.
Er is ook een "Inspect element" functie toegevoegd aan het context menu dat je in staat stelt om het element te selecteren dat zich onder je cursor bevindt.
Er wordt gebruik gemaakt van een overlay om te verduidelijken welk element er geselecteerd is. Ook krijg je een overzicht van het ID en classes van het element. Aan de onderkant van de pagina verschijnt een toolbar die je gebruikt om het element aan te passen of om een ander element te selecteren.
Breadcrumbs
De onderste balk wordt ook wel breadcrumbs genoemd. Als je een element geselecteerd hebt zie je waar in de pagina dit element zich bevindt. Welke parents en children hebben het element. Door middel van deze breadcrumbs kun je heel makkelijk een 'niveau' hoger of lager selecteren zonder dat het heel de pagina in beslag neemt.
HTML
De HTML layout bekijken is voor webdevelopers soms de meest voor de hand liggend keuze. Een klik op de HTML button is precies daarvoor bedoelt. Door middel van de resizer kun je het scherm groter of kleiner maken. Door te klikken in de HTML view kun je makkelijk andere elementen selecteren
Styles
Naast de HTML button is er ook een style button. De naam zegt het eigenlijk al. Via deze knop krijg je een overzicht van alle css styles die betrekking hebben op het geselecteerde element. Stijlregels die overridden zijn worden netjes doorgestreept. Door middel van checkboxes naast elke stijlregel kun je makkelijk eigenschappen aan of uit zetten. Een simpele klik op de stijlregel stelt je ook in staat om die regel on the fly te editen en gelijk het resultaat te zien.
Scratchpad
De zogenaamde Scratchpad is een built in javascript editor. In plaats van een klein popup schermpje krijg je een volledige editor die je kunt gebruiken. Scratchpad gebruikt de Orion code editor om syntax highlighting aan te geven en gebruikt onder andere 'indentation' net zoals moderne 'volwaardige' editors.
Scratchpad is verweven met de Firefox session restore functie. Dat wil zeggen dat je nu een stuk code kan schrijven of aanpassen en wanneer je de volgende keer Firefox weer herstart en de sessie hervat dat je code bewaard is gebleven. Natuurlijk bestaat er ook gewoon de functie om je code op te slaan en weer te herladen zonder de session functie.
Conclusie
Het lijkt erop dat we kunnen stellen dat de functionaliteiten van firebug nu verweven lijken te worden met Firefox. Als we Mozzila zelf mogen geloven komen er nog meer features en tools aan die het leven van een webdeveloper makkelijker moeten gaan maken. Je kunt zelf ook tips en feedback geven door naar de Get Involved pagina te gaan.
Wij hier bij VisionEars zullen deze tools goed in de gaten gaan houden.
