Snel fouten in website zoeken

Trefwoorden: Firefox, IE, Internet explorer, Opera, Browser, Webdesign, Webontwikkeling, Website, W3C, DOM, Validatie, Webdeveloper, Ontwikkelaar

1. Inleiding


Als je vaak aan websites bezig bent is het gewoon een must om web developer tools te hebben. Deze extra's op je browser bieden enorm handige tools waardoor het simpel wordt om fouten in websites te vinden.
In dit artikel geven we enkel links naar de tooltjes. Deze hulpmiddelen zullen je helpen bij het ontwikkelen van een krachtige website, niet het werk overnemen. Kennis over web ontwikkeling is dus nodig ;)

2. De tools


Omdat er vrij veel browsers zijn heb ik voor de 3 populairste de tooltjes gezocht die je zullen helpen.

2.1. Firefox

Firefox is de browser voor mensen die intensief bezig zijn met webdesign. Het is multiplatform en biedt 2 wel zeer krachtige tools. Beide zijn zeer aangeraden om te gebruiken.

2.1.1. Web Developer

Deze tool geeft een extra balk aan de browser met allerlei verschillende opties. Zo kun je de website snel testen zonder CSS, afbeeldingen, ... De website testen op toegankelijkheid is hier de prioriteit! Maar er is mee, je kan de CSS van websites live veranderen (je krijgt dan een extra schermpje en alle veranderen in de CSS worden meteen aangebracht).
> Download Web Developer
> Screenshot

2.1.2. Firebug

Firebug is mijn persoonlijke favoriet en werkt prachtig samen met de Web developer tool. Terwijl de web developer je helpt met toegankelijkheid zal deze tool je meer helpen met fouten opsporen in CSS. Het geeft je een enorm goed zicht over hoe de browser de CSS zal interpreteren, ook kan je attributen toevoegen (dit gaat heel simpel door zijn autocomplete functie) en simpel weglaten.
> Download Firebug
> screenshot

2.1.3. Ander handig tooltje

Een ander wel ook enorm handig tooltje is de HTML validator. Deze maakt het mogelijk om in de browser zelf HTML te valideren volgens het W3C. Zo moet je niet constant de webpagina uploaden naar de site van W3C (of als je geen internet hebt). Dit tooltje zal de broncode view van Firefox omtoveren tot een ietwat krachtiger en informatiever uitziende code view.
Echter dit tooltje is niet volledig waterdicht. Hij is ietwat strenger als de echte validator en laat soms wat steken vallen. Maar al bij al is het een waardig alternatief om snel te weten te komen hoe je website zal scoren.
> Download HTML validator
> Screenshot
Voor de nieuwsgierige, het is de site van Microsoft die we hier valideren :D

2.2. Opera

De steeds populairder wordende Opera browser heeft van zijn ontwikkelaars ook een aantal handige tools meegekregen. Ze zijn niet zo krachtig als die van Firefox maar zijn al zeker een goede stap in de richting.
Het is wel een vereiste om Opera 9.2 of hoger te hebben. Dit is natuurlijk geen probleem omdat Opera op praktisch elk platform kan draaien (ongeacht de versie).

2.2.1. Web developer tools

Sinds de lancering van Opera 9.2 zijn er de webdeveloper tools aangekomen. Deze moeten het aangenamer maken voor ontwikkelaars om websites na te kijken in Opera. Zo krijg je (net als bij de tools van Firefox) een handig CSS editor, een DOM inspector, ... die je ogen zullen openen.
Het is een zeer mooi begin en prachtig ge´ntegreerd, maar helaas kan het niet tegenop de tools van Firefox.
> Download web developer tool (volg de korte handleiding)
> Screenshot

2.2.2. Andere handige tooltjes

Een ander handig tooltje is de Ruler. Dit klein widget geeft een kleurrijke meetlat (in pixels) voor het meetwerk. Soms wel enorm handig voor de groottes van iets te meten ;)
> Screenshot
> Download Ruler

Een ander vaak vergeten tooltje van Opera is de validator die ingebouwd is. Met deze functie kan je een (lokale) website volledig valideren door de broncode naar W3C te sturen.
Gewoon rechtermuisknop in opera op de site > validate. Je zal (als het de eerste keer is) een melding krijgen dat je de broncode zal doorsturen over het net. Nadien krijg je de uitslag van de verstuurde code.

2.3. Internet Explorer

Aan IE hebben ze bij Microsoft ook eens gedacht aan tools. De tool is beter dan ik verwachte, maar mijn voorkeur gaat toch uit naar de bovenstaande tools.
Net als alle vorige besproken tools biedt ook deze een DOM inspector aan, een CSS editor en een paar toegankelijkheid tools. Ze zijn prettige ge´ntegreerd en de CSS editor heeft een autoaanvulling. Iets wat altijd wel handig is als je even wilt testen (en niet weet wat te typen :D)
> Download
> Screenshot

3. Vragen opmerkingen


Vragen kan je zoals gewoonlijk kwijt in het forum. Opmerkingen kan je onder dit artikel schrijven.

4. Conclusie


Alle browsers hebben wat meer te bieden dan dat ze standaard tonen. Met deze tools kan je het werk enorm verlichten en je wat zoekwerk besparen.
Mijn voorkeur gaat uit naar Firefox met Firebug. Firebug is een enorm goede aanwinst die alles keurig ordent en prachtig ge´ntegreerd is in de steeds populairder wordende browser.

Ik wens je natuurlijk veel plezier met de tijd die je uitspaart :DDit artikel werd geschreven door SMG op zaterdag 19 mei 2007 om 11:42 en werd sindsdien 9910 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.