Artikelen

Als webdeveloper heb je tools nodig om je resultaten te testen en te bekijken. De jongens bij Mozilla begrijpen dat. Daarom kan je als webdeveloper niet om FireFox heen. FireFox heeft namelijk twee specifieke add-ons uitgebracht die perfect inspelen op de behoefte van de webdeveloper: FireBug en de FireFox Web Developer Toolbar. Deze laatste wordt hier kort toegelicht.



Je kunt de Web Developer Toolbar downloaden en installeren op de FireFox add-on pagina. Nadat de webdeveloper toolbar is geïnstalleerd, heb je een extra taakbalk in je FireFox browser. In deze balk staan enkele welbekende termen (Disable, Cookies, CSS, etc..), waaronder weer allemaal waardevolle acties verborgen zijn. De tool is zeer uitgebreid, maar in dit artikel worden de meest belangrijke functionaleiten toegelicht.

Disable
Met deze optie kun je features op je webpagina aan en uitzetten. Zo kun je JavaScript, Java, meta redirects of de page colors uitzetten. De optie ‘Disable Referrers’ geeft je extra privacy, omdat de gegevens over de pagina van waaruit je de nieuwe site bezoekt, worden verwijderd. Ook heel handig is de optie om standaard je cache uit te hebben staand. Dit scheelt weer heel vaak op Control F5 of Appeltje R drukken, tijdens het testen.

Cookies
Je kunt met deze optie het opslaan van cookies uitzetten of de cookies van sessies verwijderen. Daarnaast heb je nog de opties: disable external site cookies, delete domain cookies, delete path cookies, view cookie information, and add cookie.

CSS
Ook een hele mooie feature van deze toolbar is de mogelijkheid om realtime de stylesheet te bewerken via ‘Edit CSS’. Aan de zijkant van je scherm verschijnt een editor. Als je hier iets in aanpast, dan zie je dit direct terug op de webpagina. Dit is handig als je snel even wilt zien wat het effect is van het toevoegen van kleuren of dat de DIV nog wel past. Met de CSS editor kun  je naast jouw eigen pagina alle online pagina’s die je in je browser bekijkt editen. Je kunt met ‘disable styles’ ook alle CSS uitzetten van een pagina. Deze optie laat goed zien hoe een website afhankelijk is van zijn stylesheet, wil het nog bruikbaar zijn.

Forms
Een belangrijk item voor de webdeveloper is de 'Form Information' optie. Dit optie geeft je informatie over het formulier op de pagina. Je kan via de 'Populate Form Fields' auomatisch formulieren laten invullen. Voor de snelle testers een mooi optie. Andere zeer bruikbare opties zijn: display form details, show passwords, view form information, convert form methods (van GET naar POST), Convert Selected Elements to Text Inputs, Enable Auto Completion, Enable Form Fields, Clear Radio Buttons, Make Form Fields Writable, Populate Form Fields en Remove Maximum Lengths

Images
Met deze optie kun je de afbeeldingformaten laten weergeven van alle afbeeldingen op de website. Je kunt ze ook verwijderen of het pad bekijken naar de afbeeldingen met 'alt' en 'title' attribute.

Information
Dit menu item heft veruit de meeste opties. Je kunt van je website namelijk allerlei nuttige informatie opvragen. Informatie van bijvoorbeeld de gebruikte id’s en classes of element informatie. Als je de kleur informatie opvraagt, krijg je een mooi kleuren pallette van de gebruikte CSS kleuren op de website. De totale grootte van je webpagina kun je bekijken met 'View Document Size'. Dit item heeft zeer veel fijne opties, waarmee je een keer moet experimenteren om te zien wat het allemaal doet.

Miscellaneous
Een handige functie in deze optie is de mogelijkheid tot “Small Screen Rendering”, waarin je website getoond in een schermformaat van een mobiel apparaat zoals een PDA. Je kunt ook een ruler of guides toevoegen aan de pagina om te zien of alles goed uitlijnt. Ook een mooie optie is het realtime editen van de HTML in de sidebar. Als je wat veranderd in de code, dan zie dit direct terug op website.

Outline
Deze optie geeft je de mogelijkheid om de elementen van website een border te geven. Zo kun je zien waar ze staan en hoe groot ze zijn. Je kunt tables, tablecells, div elementen, headings, links etc outlinen om zo een beeld te krijgen van hun positie als deze niet correct staan.

Resize
Je kunt met deze optie in en uitzoomen op je website. Daarnaast kun je kijken hoe je website eruit ziet op een resolutie van 1024x768, of een zelf ingestelde resolutie.

Tools
Deze optie levert tool waarmee je je HTML, CSS, Feeds en links kunt valideren.

View Source
Je kunt met deze optie de broncode van de webpagina bekijken. Dit kan natuurlijk met elke browser, maar de kracht van deze tool is dat je broncode direct kunt laten openen in je favorite text/html editor zoals je Kladblok, EditPlus of (ahum..) Dreamweaver.

Options
Deze optie geeft je de mogelijkheid om de webdeveloper toolbar aan te passen.

Enthousiast? Bekijk dan ook FireBug. Een zo mogelijk nog krachtigere add-on die je nog verder kan helpen met het optimaliseren van je website.