Web Tip #1 - Gebruik de Firefox Web Developer plug-in

Gebruik de Firefox Web Developer plug-in

Bij het ontwerpen van webpagina's hoort een behoorlijke dosis analyse van het eigen (en soms ook andermans) werk. Het met het 'blote oog' nalopen van (X)HTML met geneste tabellen, stylesheets etc. is echter geen pretje.

Gebruik daarom de Mozilla (Firefox) Web Developer plugin. Hiermee wordt de structuur van een webpagina direct duidelijk.

De Web Developer plugin is geschreven door Chris Pederick. De homepage is hier.

Installatie

Installeren gaat eenvoudig vanuit Firefox zelf: Tools -> Extensions -> Get More Extensions.
Na het herstarten van de browser is er dan een extra toolbar in Firefox aanwezig waarmee de extra functies gebruikt kunnen worden:

Gebruik

Er zijn veel functies aanwezig, te veel om hier op te noemen. We lichten er een paar functies uit om een idee van de functionaliteit te geven:

Met de functie Information - Display ID & Class details worden ID en Class informatie van paginadelen getoond op de pagina zelf. Op dezelfde wijze kunnen de afmetingen en paden van plaatjes zichtbaar worden gemaakt.

Met de Disable functie kunnen snel features van de browser aan- en uitgezet worden. Cookies, geanimeerde plaatjes, Java, Javascript etc. kunnen met één click aan-en uitgezet worden.

Met de CSS functie kan snel CSS informatie bekeken worden, zowel van alle CSS samen als specifiek van een deel van de pagina. Klik op 'View Style Information' en vervolgens op een deel van een webpagina, en de van toepassing zijnde style informatie wordt getoond.

Met de Forms functies kan de structuur van een form (met hidden fields) zichtbaar gemaakt worden, form passwords kunnen bekeken worden, GETs kunnen in POSTs worden omgezet en andersom, etc.

Al met al een bijzonder nuttige plugin. [JH]