29/01-2007 | Björn Rixman

Værktøj for webredaktører, del 1

I denne første del af en række kortere artikler vil vi kigge nærmere på tillægsprogrammer til webbrowseren Mozilla Firefox. Hvis du er webudvikler, er det meste i denne artikel nok gamle nyheder, men læs gerne videre alligevel, og sig til hvis du synes der er nogle plugins vi mangler at fortælle om…

Firefox er en god browser i sig selv, og der findes et utal af plugins der er essentielle hvis du på en eller anden måde laver nogen slags webpublicering. Selv om man ikke skriver nogen kode har følgende plugins nyttige funktioner for analyse og fejlsøgning at byde på.

Web Developer Toolbar

Web developer Toolbar er udviklet af Chris Pederick, og har i lang tid været det første jeg hentede ned i en nyinstalleret browser. Den første version af dette plugin udkom i midten af 2003, og har siden da forandret mange webudvikleres hverdag.

WDT kommer med en masse funktionalitet der gør det virkeligt nemt at danne sig en overblik over en sides opbygning, hvilke elementer der er på siden, hvilket navn og andre egenskaber de har, etc etc. Der er også mulighed for at justere fremvisning af billeder (Skjul baggrundsbilleder, marker alle billeder der mangler forklarende tekst, udskriv størrelser oven på billeder…). Der er også indbyggede genveje til validering af HTML og CSS (under Tools>Validate).

Nyttige kortkommandoer til Web Developer Toolbar:

  • Disable All styles (win: ctrl+shift+S, mac: cmd+shift+S)
  • Display Element Information (win: ctrl+shift+F, mac; cmd+shift+F)

Firebug

Firebug af Joe Hewitt har kun lidt mere end et år på bagen, men har allerede gjort livet utroligt meget nemmere hvis man har noget som helst med javascript, Ajax eller CSS-layout at gøre. Firebug lader dig inspicere og editere HTML, tekst, stylesheets og flytte rundt på ting rent visuelt, samt i realtid at overvåge data der bliver sendt til og fra siden.

Det er nemt at inspicere og ændre i elementer på siden; åbn firebug gennem at trykke F12, tryk på “Inspect” i venstre hjørnet (win: ctrl+shift+C, mac: cmd+shift+C) rør musen over det element du ønsker at kigge nærmere på og klik. Fra der har du mulighed at ændre i HTML, stylesheet eller layout.

En anden god ting er netværksovervågning, der i realtid viser eksakt hvad der hentes ned når siden vises, hvor lang tid hvert element tager at hente ned, hvor meget det fylder samt hvorvidt det bliver cachet eller ej. Denne funktionalitet er enormt god, selvom man ikke har så meget med selve webudviklingen at gøre, da den for eksempel viser hvor lang tid eksterne resurser er om at overfore data.

Getfirebug.com beskriver alle features i detalje, og der er for øvrigt også dokumentation med hensyn til genveje etc.

HTML Validator

Hvis du har brug for at validere HTML-sider, så kan jeg anbefale et kompletterende Firefox plugin “” HTML Validator. Det giver dig en lokal html-validering direkte i Firefox. Et ikon i nederste højre hjørnet af vinduet viser om der er nogle valideringsfejl på siden. Når man kigger i HTML-koden vises detaljerede fejlbeskrivelser.

Session manager

Hvis man som jeg tit sidder og arbejder med forskellige projekter der hver kræver at man har flere forskellige sider åbne samtidligt (administration, testmiljø, livesite) for at kunne arbejde effektivt, er Session manager en virkelig tidssparer. Session manager lader dig gemme en browser-session; Den husker simpelthen alle åbnede sider i faneblad og vinduer, og gør det nemt at veksle mellem sessionerne.

Internet Explorer Developer Toolbar

Microsoft har også lavet et plugin der modsvarer Web Developer Toolbar til Internet Explorer, under navnet Internet Explorer Developer Toolbar Beta 3. Jeg har begrænset erfaring med dette plugin, men det ser ud til at kunne cirka detsamme som Web Developer Toolbar.

Samlede links til download

Af: Björn Rixman
Kategorier: Design, Teknologi

Der er lukket for kommentarer.