Gearchiveerde post van float.be
Handige Firefox extensies voor webontwikkelaars
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 extensies 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.
Reacties
Interessante opsomming van Web Development extensies is : Rapid Web Development and Testing with Mozilla Firefox En dit zou misschien ook wel handig kunnen worden (beta) : SEO for Firefox
De kleur van ColorZilla kan je dus wel naar het klembord kopiëren. De snelkoppeling ken ik niet, maar als je een kleur geselecteerd hebt en je klikt dan rechts op het pipetje in je statusbalk dan ga je een deel opties zien, waaronder ‘copy’ in 4 formaten. Autocopy staat trouwens ook standaard aan. Selecteer maar es een kleur en plak dan maar es gewoon in een editor. Schitterende plugin trouwens!
CTRL + SHIFT + S >>> ZAP !
Misschien is dit een goeie resource: http://www.devlisting.com/
Ik gebruik momenteel: - IE View Lite: Voegt een link “view this page in IE” toe aan je menu als je met je rechtermuis klikt. Berehandig als je weer op een site terechtkomt die je verplicht om IE te gebruiken :) - Web Developer - User Agent Switcher (verander je user agent, kan sommige sites doen crashen ^^) - Colorzilla - DownThemAll (als je bvb een directory hebt met 200 foto’s en je wil ze allemaal.. een druk op de knop, checkboxes voor de foto’s en klaar!) - PDF Download (als je op een .pdf klikt krijg je meerdere opties view/download in plaats van dat hij het gewoon opent in je browser) - MeasureIt - Bookmarkshome (addon voor op je startpagina livemarks & bookmarks weer te geven. Zonder dit wil ik NIET werken, is super handig!) Bovenstaande zijn redelijk onmisbaar. grtz Davy
Ook deze is superhandig: http://jennifermadden.com/scripts/ViewRenderedSource.html