You may want to put some text here

5 Beste Firefox Addons voor webdevelopers

Welke Firefox Add-ons heb ik geïnstalleerd en waarvoor gebruik ik ze? Dat is de vraag die ik in dit artikel zal beantwoorden. Ik heb dit artikel geschreven om nog maar eens duidelijk te maken dat Firefox de browser bij uitstek is voor webdevelopers (en natuurlijk ook voor de gewone internetter). Er is geen enkele andere browser die zoveel verschillende hulpinstrumenten ter beschikking heeft voor het maken van websites. Dit artikel is vooral om de belangrijkste van deze development-instrumenten nog eens onder de aandacht te brengen en voor de beginnende webdeveloper een duwtje in de goede richting te geven.

Tamper Data

Deze eerste add-on geeft je de mogelijkheid om GET en POST request te onderscheppen en te bewerken voor je ze verder stuurt naar de server. Tamper Data gebruik ik vooral tijdens het debuggen van een AJAX applicatie.

Tamper data addon

Tamper Data Downloaden

Webdeveloper Toolbar

Deze add-on mag gewoon niet ontbreken tussen mijn overzicht. Een add-on met te veel features om hier allemaal uit te leggen. Om jullie toch een voorsmaakje te geven zal ik enkel mogelijkheden aanhalen.

  • Bewerken van Cookies
  • De mogelijkheid om live te kijken of je HTML code valid is. Het voornaaste hierbij is dat het ook werkt bij webpagina’s die op je lokale server staan. Hierdoor moet je niet meer elke keer een webpagina uploaden om te kunnen zien of hij valid is.
  • Het uitzetten van bepaalde element types op je pagina. Denk hierbij maar aan stylesheets, images of divs.
  • Het tonen van verborgen formulier velden.

Webdeveloper Toolbar Downloaden

Firebug

Firebug is echt mijn favoriete add-on. Als ik moest kiezen om één plugin te houden dan zou ik zonder twijfelen voor deze kiezen. Het doel van deze plugin kan je omschrijven als het oplossen van problemen in je HTML, CSS en javascript van je website.

  • Je kan bijvoorbeeld gaan inspecteren welke CSS stijl er op een bepaald HTML element ligt en van welke stijl deze properties overerft.
  • On-the-fly in en uitschakelen van properies in je stylesheet.
  • Javascript debuggen met breakpoint zoals we dat kennen vanuit Visual Studio.
  • Manueel uitvoeren van javascript op een pagina.
  • Een lijst bekijken van welke request er gestuurd zijn voor een pagina op te bouwen. Van deze requests kan je ook nog eens gaan bekijken wat de server hierop geantwoord heeft en hoelang de request geduurd heeft.
  • De DOM in een volledig uitklapbare tree bekijken. Dit kan zeer handig zijn tijdens het programmeren met javascript.

Firebug Addon

Firebug Downloaden

FirePHP

FirePHP is een add-on op de Firebug add-on(pff niet simpel). Dit kan je gebruiken om debug informatie vanuit je PHP naar het console venster van je Firebug te schrijven. Normaal zou je debug informatie met echo of print op het scherm tonen met als gevolg dat heel je layout om zeep is. Voor meer informatie over FirePHP kan je altijd mijn tutorial PHP script debuggen met FirePHP lezen.

FirePHP Downloaden

FireFTP

Hier moet ik verder niet veel uitleg bij geven denk ik. Een FTP client in je browser.

Fire FTP Addon

FireFTP Downloaden

ColorZilla

Geeft je de mogelijkheid om te kijken welke kleur een bepaalde pixel op een webpagina heeft.

ColorZilla Downloaden

Conslusie

Dit waren mijn 5 belangrijkste Firefox (webdevelopment) add-ons. Ik zou me niet meer voor kunnen stellen dat ik aan een website zou moeten beginnen zonder deze tools. Als je veel met websites maken bezig bent zoals mij dan zou ik deze vijf add-ons zeker installeren want ze besparen je heel wat frustraties en tijd.

Laat ook even weten welke add-ons jij zoal gebruikt in een reactie.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

7 Responses »

  1. Prima lijst,
    Modify header ( https://addons.mozilla.org/nl/firefox/addon/967 ) kan ook zeer handig zijn tijdens het testen van je website.

  2. Dankjewel voor de leuke tips. FireFTP kende ik niet. Ga ik zeker ook uitproberen, hopelijk werkt het als FileZilla.

  3. De lijst is redelijk voor de hand liggend, zoveel echt specifieke zijn er niet. Toch mis ik er nog een paar (die overigens buiten de top 5 vallen :) )
    – HTML Validator https://addons.mozilla.org/nl/firefox/addon/249
    – FireCookie (cookie tracer voor Firebug)
    – IE Tab

    Het vermelden waard zijn verder:
    – greasemonkey
    – yslow (voor firebug)
    – debugbar (voor IE)

  4. Inderdaad goed lijst, gelijk twee gebruikt, zeer handig.
    Wordt gewoon een ontwikkelomgeving zo :-)

    thnx.

  5. Om te controleren of de website goed is opgeleverd gebruik ik Total Validator.
    https://addons.mozilla.org/en-US/firefox/addon/2318

  6. Top lijst! Gelijk een aantal gebruikt. Alleen bij FirePHP is het zo dat je bepaalde API moet gebruiken en includes in je PHP files moet aanbrengen? Dat lijkt me niet zo veilig…

    Bedankt voor de lijst!

    • Bedankt Leon

      De classe die je include voor FirePHP is zeker geen veiligheids risico. Het enige wat het doet is de logs die je in PHP maakt wegschrijven als een header in de request van die pagina. Deze header requests worden dan terug uitgelezen door de FirePHP plugin.

Leave a Comment