9 December 2006, geplaatst in Browsers door Davy
Hoewel het nieuws zich als een lopend vuur verspreidt, wil ik toch nog eens Firebug in de kijker plaatsen. Voor zij die het nog niet weten, Firebug (1.0 beta) is een extensie voor Firefox 2, maar wat voor één!
Firebug is een onmisbare tool voor webontwikkelaars. Het stelt je in staat om vanuit de browser wijzigingen aan te brengen in je CSS, HTML en Javascript, om zo snel fouten op te sporen en te verhelpen.
Zo kan je ook de HTML broncode bekijken nadat ze is aangepast door Javascript, iets wat met de ingebouwde View Source in Firefox niet kan. Je kan de broncode doorzoeken en je resultaten laten highlighten.
Je kan AJAX requests live volgen en de headers raadplegen, hetgene vezonden wordt en het resultaat ervan. Van elk HTML element kan je de CSS stijlen bekijken, waarbij zelfs wordt weergegeven welke stijlen er later worden overschreven.
Het positioneren aan de hand van CSS wordt ook eenvoudiger gemaakt doordat alle afmetingen aan de hand van een box model worden getoond en visueel op de pagina weergegeven.
Deze Firefox uitbreiding is gewoon geweldig en over alle features kan waarschijnlijk een boek geschreven worden. Dus twijfel niet, installeren die handel, en aanschouw zelf.
Je kan alvast ook een Firebug screencast bekijken (via Simplebits).
27 September 2006, geplaatst in Browsers door Davy
Mozilla Firefox is de browser die ik dagelijks gebruik. En met reden! Niet alleen omwille van zijn superieure rendering van webpagina’s, maar ook omdat er een aantal fantastische uitbreidingen beschikbaar zijn, die het leven van een webontwikkelaar aanzienlijk kunnen verbeteren.
Andere browsers, zoals Internet Explorer, Opera of Safari kunnen mij maar matig bekoren, en die gebruik ik dan ook enkel en alleen om websites te testen. Toch kan ik niet ontkennen dat een browser als Flock ook enorm veel potentieel lijkt te hebben, maar voorlopig zie ik niet de minste reden om over te stappen naar een ander kamp.
Extensies voor webdevelopers
Niet dat ik iemand ben die alle extensies eens uitprobeert, maar regelmatig kom ik eens een extensie tegen waarvan ik het de moeite vind om ze te installeren. Volgende extensies hebben dan ook een positieve invloed gehad op mijn workflow:
- ColorZilla
- Deze extensie plaatst een klein colorpicker icoontje onderaan je browser en hiermee kan je kleuren in een website laten tonen in de statusbar. Jammer dat je die kleur dan niet naar het klembord kan laten kopiëren (tenzij ik die shortcut gewoon niet ken).
- Web Developer toolbar
- Als er één extensie is die je als webontwikkelaar moet hebben, dan is het deze wel. De mogelijkheden zijn enorm. De meest handige opties vind ik: afbeeldingen uitschakelen, CSS stylesheets tonen, cache legen, resizen en validate (local) HTML.
- JSView
- Hiermee kan je snel de broncode bekijken van externe files, zoals CSS stylesheets en Javascript.
- Measure it
- Enorm handig voor het achterhalen van afmetingen op een website.
- x-ray
- Heb ik wel nog niet lang geleden geïnstalleerd, maar met deze extensie kan je tags op een pagina bekijken zonder dat je in de broncode moet kijken.
- Firebug
- Firebug is dé onmisbare extensie voor Firefox. Een tool die elke webontwikkelaar moet geïnstalleerd hebben. Debuggen was hiermee nog nooit zo leuk !
Shortcuts voor Firefox
Naast extenties gebruik ik ook vrij veel shortcuts. De meest handige shortcut die ik gebruik is vast en zeker CTRL + U. Hiermee roep je de broncode van een webpagina op, netjes voorzien van syntax highlighting. Ideaal om de HTML bron te bestuderen, of te controleren of je site wel goed is opgebouwd.
Een andere is CTRL + SHIFT + C (hiervoor moet je wel eerst de webdeveloper toolbar installeren). Met die shortcut roep je de CSS stylesheets op die op die website gebruikt worden.
Als je zelf nog handige extensies of shortcuts weet, laat ze dan maar komen !
UPDATE: Firebug extensie toegevoegd.