Day Two Wiki
 

 

 

 

 
 
 

 

 

 

Day Two logo spiegel
wiki-spiegeling.jpg
 

 

 
Home / Wiki / Webdesign tools / Firefox Webdeveloper toolbar 
 

 

 

 

 

 

Firefox Webdeveloper toolbar

 

De Firefox Web developer toolbar is een van de meest handige tool die je kan gebruiken bij het bouwen van een website. Deze korte introductie laat zien hoe je deze extensie kan gebruiken bij het ontwikkelen van websites. Om gebruik te kunnen maken van de Web developer toolbar dien je de add-on in Firefox te downloaden en te installeren.
Firefox webdeveloper toolbar

 

Een overzicht van de Webdeveloper toolbar

 

Na de installatie van de Web-developer toolbar zie je de menu items bovenaan je browser, uitgelegd van links naar rechts:

Disable: Deze menu items geven je de mogelijkheid om features (tijdelijk) uit te schakelen op een website. Bijvoorbeeld cache, java, javascripts, meta redirects, pagina kleuren en pop-up blocker. Een item die erg handig is tijdens het bouwen van een website is het uitschakelen van je cache. Cache kan er voor zorgen dat niet alle laatste ontwikkelingen binnen een site getoond worden. Indien je zeker wilt weten dat je de laatste versie bekijkt, schakel je de cache uit.

Cookies: Onder het item 'Cookies' zitten opties die handig zijn tijdens het programmeren van een site waar cookies worden gebruikt. De mogelijkheden zijn, disable all cookies, disable external site cookies, clear session cookies, delete domain cookies, delete path cookies, view cookie information en add cookie.

CSS: Dit menu bevat mijn favorieten tool van de Web developer toolbar: Edit css. Wanneer je deze optie activeert kan je onderin het scherm de css code aanpassen. Je ziet dan direct op het scherm wat voor invloed de wijzigingen hebben op de website. Wanneer je bijvoorbeeld wilt zien hoe de website er uit zou zien met een andere kleur voor het lettertype, zou je dit meteen kunnen bekijken. Wanneer je de optie Edit css uitschakelt verandert de pagina weer terug in zijn oude vorm.
Naast de functie Edit css is er ook nog Disable css waarmee je alle stylesheets uitschakelt.

Images: Deze feature kun je gebruiken om afmetingen en bestandsgrootte van afbeeldingen in te zien op de website. Je kan de afbeeldingen (tijdelijk) uitschakelen of de URL er van bekijken.

Information: Het item information bevat veel opties. Je kan meer informatie opvragen over de structuur van de pagina met 'Display Id & Class details' en 'Display Element Information'. Deze zijn allebei handig omdat ze visueel de Id's en Classes laten zien, wat het uiteindelijk weer makkelijker maakt om Edit css optie te gebruiken. Je hebt dan immers goed inzicht in de opbouw van de pagina. Het is ook mogelijk om de structuur van de tabellen te bekijken met display table depth.

Miscellaneous: Erg handige optie bij Misccelaneous is Small screen rendering. Hiermee kun je een website bekijken hoe het er uit zou zien op een PDA of mobiele telefoon. Een liniaal behoort ook tot mogelijkheden om je website tot op de pixel nauwkeurig uit te lijnen. Je kan zelfs onderin je scherm de HTML aanpassen en in 'real time' bekijken hoe het er uit ziet.

Outline: Met Outline kun je objecten op de website een omlijning meegeven zodat je de structuur van de website goed kunt bekijken. Als je bijvoorbeeld door de bomen het bos niet meer ziet is het handig om met Outline je structuur aan te duiden. Je kunt frames, headings, tabellen, cellen, div elementen en externe links een omlijning meegeven. Verschillende kleuren moeten er voor zorgen dat het een duidelijk overzicht is.

Resize: Benieuwd hoe de website er uitziet bij een lagere resolutie? Gebruik dan resize om te kijken hoe de website er bij 1024x768 uitziet of zelfs bij 800x600.

Tools: Onder tools vind je de items om HTML, CSS en links te valideren en de laadtijd kan worden berekend in een rapport.

View Source: Hiermee kan je de broncode bekijken van de website. Dit is natuurlijk niet veel anders dan gewoon in de broncode kijken van je browser. Deze optie wordt pas interessant als je bij de instellingen aangeeft dat Firefox de broncode in een externe editor moet bekijken. Hiermee kan je bijvoorbeeld de broncode bekijken in Notepad++.

Options: Voorkeuren van de Web delevoper toolbar kun je hier allemaal wijzigen.

Als je eenmaal hebt gewerkt met de toolbar zul je al snel zien dat dit een essentieel stukje gereedschap is voor webdesign.
 
 

 

 
We build tomorrow's web