Som webdesigner (og teknologisk kunnskapsrik bruker av Internett), er det ingen unnskyldning for at du ikke skal bruke Firefox som din primære nettleser. Hvis du ikke bruker Firefox ennå, må du gå og nedlasting det akkurat nå. Ikke bare gir Firefox en topplinje av nettleseropplevelsen, men det gir også en endeløs mengde funksjonalitet som du ikke finner i noen annen nettleser.

Fordi tredjeparter kan utvikle tillegg for Firefox, ved å laste ned de beste tilleggene som er tilgjengelige, kan du forvandle Firefox til et verktøy som dramatisk øker produktiviteten og sparer deg for en mengde tid. Siden det er så mange forskjellige tilleggsprogrammer tilgjengelig for nedlasting, kan det være litt overveldende å velge hvilke du skal bruke.

Derfor bestemte jeg meg for å gjøre alle legwork for deg og kompilere en liste over de seks beste Firefox-tilleggene for webdesignere.

Webutvikler

Web Developer Screen Shot Selv om det kalles Webutvikler , denne Firefox-tillegget er helt uvurderlig for webdesignere. Hvis du bare skulle laste ned og installere en Firefox-tillegg, er dette det jeg vil anbefale til deg. Årsaken er at dette tillegget gir en rekke forskjellige nyttige funksjoner, og kan bli klassifisert som Swiss Army Knife of Firefox add-ons .

Den første funksjonen til denne tilleggsversjonen som designerne vil finne nyttige er CSS-menyen . Funksjoner i denne menyen inkluderer muligheten til å deaktivere stiler, vise CSS etter medietype, vise CSS, vise stilinformasjon, legge til et egendefinert brukerstilsark eller redigere CSS direkte .

Den neste funksjonen av interesse for designere er bildemenyen . I tillegg til at du kan vise ALT-attributter, bildedimensjoner, bildefilstørrelser og bildebaner, kan du deaktivere bilder, finne ødelagte bilder, skissere bilder, erstatte bilder med ALT-attributter og flere tilleggsfunksjoner.

Selv om jeg kunne bruke flere sider på alle funksjonene som denne tillegget tilbyr, vil jeg bare røre på noen få andre funksjoner som webdesignere vil finne spesielt nyttige. Disse inkluderer evnen til å skissere forskjellige elementer (alt fra rammer til blokknivåelementer), redigere HTML og vise skjulte elementer .

Firebug

Mens Web Developer er den første tillegget jeg vil anbefale til noen designer, Firebug Kjører en nær sekund i form av nytte for designere.

Med Firebug får du øyeblikkelig muligheten til å redigere, feilsøke eller overvåke en hvilken som helst nettside . Firebug gir deg full kontroll over CSS, HTML og JavaScript på en hvilken som helst side du velger. Best av alt, alle endringer du gjør er gjort live og umiddelbart , slik at du raskt kan teste ut forskjellige endringer og se resultatene av disse endringene umiddelbart.

Som de fleste av de beste tilleggene til Firefox, går Firebug utover sin grunnleggende funksjonalitet og gir et vell av muligheter som gjør det enkelt for enhver bruker å tilpasse sin bruk av denne tillegget helt. Noen av de ekstra funksjonene og alternativene som tilbys av Firebug inkluderer tastetrykkveiledninger, muligheten til å kontrollere hvordan og hvor Firebug-redigeringsområdet vises, visuelle guider for redigering av CSS, analyse av nettverksaktivitet og tilpassbar logging for JavaScript .

ColorZilla

Som webdesigner vet du aldri når inspirasjon kommer til å slå deg mens du surfer rundt på Internett. For eksempel kan du se på et nettsted og komme over en farge som du virkelig liker.

Hvis du vil ha en rask og effektiv måte å kunne finne ut nøyaktig HSV og RGB-verdien for verktøyet, bør du installere ColorZilla tillegg.

ColorZilla-tillegget har en online eyedropper , noe som gjør det ganske enkelt å få den nøyaktige verdien av en bestemt farge. I tillegg til online eyedropper tilbyr ColorZilla flere tilleggsfunksjoner som de fleste webdesignere vil finne nyttige, for eksempel en DOM-fargeanalysator og online palettviser . DOM-fargeanalysatoren lar deg finne elementer på siden som samsvarer med en gitt farge og finne ut CSS-reglene som angir en bestemt farge, mens online-palettviseren lar deg bokmerke og dele fargepaletter du liker.

Fireshot

FireShot Skjermbilde

Selv om operativsystemet ditt uten tvil har en innebygd skjermopptaksfunksjon, betyr dette ikke at standard skjermopptak har alle de evnene du trenger.

For eksempel kan standard skjermopptak av operativsystemet få tak i deler av en nettside som ligger utenfor nettleservinduet?

I de fleste tilfeller vil svaret på det spørsmålet være nei. Heldigvis finnes det en Firefox-tillegg som tilbyr denne funksjonen, sammen med en rekke andre nyttige funksjoner.

FireShot er et avansert skjermbilde add-on for Firefox . I tillegg til å gi deg muligheten til å fange en hel nettside (selv når det er deler av nettsiden som ikke er synlige som følge av begrensningene i nettleservinduet), kan FireShot også legge til kommentarer direkte til din skjermfangst.

Fireshot gir deg flere alternativer for å håndtere skjermfangstene dine. Ikke bare kan de bli lagret i en rekke filformater, men de kan også lagres på datamaskinen din, sendes til andre eller lagres på den gratis FireShot-hosting-serveren. Som et resultat av det brede spekteret av funksjoner har denne tillegget tiltrukket over hundre og femti tusen aktive brukere, og har vist seg å være uvurderlig for webdesignere og andre Internett-profesjonelle.

CSS Validator / HTML Validator

Som designer ønsker du å sikre at alt ditt harde arbeid lett kan nås av besøkende og vises riktig for dem. En av de enkleste måtene å sikre at begge oppgavene er oppnådd, er ved å validere all kode .

Selv om de er to separate tillegg, bør både CSS Validator og HTML Validator installeres i nettleseren til en hvilken som helst webdesigner. Når tilleggene er installert, vil CSS Validator kan nås fra Verktøy-menyen, mens HTML-validatoren kan nås fra Firefox-statuslinjen.

Hver av tilleggene validerer koden mot de relevante W3C-standardene . Mens CSS Validator bare gjør en standard validering av koden, gir HTML Validator noen tilleggsfunksjonalitet.

Når du bruker HTML Validator, kan du velge å validere direkte i nettleseren (der feil vises som statuslinjeikon), vis kilden med forklaringer på feil etter validering eller en validering med foreslåtte løsninger på eventuelle feil.

Browser Window Resizer

Som noen som lager design for Internett, er et av de mest frustrerende problemene du utvilsomt støter på, å skape design som fungerer over en rekke skjermstørrelser.

Fordi du ikke vet om en besøkende skal se på arbeidet ditt på 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 eller 1600 × 1200, er det ditt ansvar å lage design som fungerer i alle disse resolusjonene. .

Mens det finnes flere måter å se arbeidet ditt på forskjellige oppløsninger, har jeg funnet ut at nettleseren Window Resizer add-on er den mest effektive måten å oppnå denne oppgaven på. Når du laster ned og installerer dette tillegget, kan du umiddelbart endre størrelsen på nettleservinduet til noen av standardoppløsningstørrelsene som er oppført ovenfor.

Dette vil tillate deg å se om designet ditt skal se bra ut til besøkende som ikke bruker samme oppløsning som deg. Det beste med dette tillegget er at hvis du bruker det sammen med de andre tilleggene i denne listen (spesielt Firebug), når du ser at noe ikke vises riktig, kan du umiddelbart gjøre justeringer til koden din og se om det løser problemet, alt uten å forlate ditt nåværende nettleservindu.

Vet du om andre gode utvidelser for designere? Du er velkommen til å kommentere og gi oss tilbakemelding.