(Foto: Computerworld)

Lav websider i Firefox

Opret et udviklingsmiljø med Firefox. Det er nemt at gøre browseren til en komplet udviklingsplatform uden at bruge andet end gratis extensions.

23. april 2010 kl. 12.22

Af Redaktionen, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Firefox har en samlet markedsandel på 27 procent og bliver i almindelighed betragtet som de professionelles foretrukne browser. Designere, udviklere og neteksperter elsker den. Den er stabil, skalerbar og prøver ihærdigt at være ajour, når det gælder netstandarder. Men hvis du kun bruger den som browser, går du glip af en masse.

Mozillas modulære addon-funktioner gør det muligt at hælde mere kraft i Firefox. Det har sat tanker i gang hos os. Kan du bruge Firefox-extensions til at forvandle en browser til et integreret udviklingsmiljø? Det viste sig, at dét kan man.

En af projektets nemmeste dele består i at føje css, html og scriptfunktioner til kernebrowseren. Det ordner du let med en række stærke, gratis værktøjer, der er kompatible med Firefox 3.5.

Du kan gå endnu videre med ftp, farvevalg, kodeverifikation, grafik og layout. Resultatet er en web-redigeringsplatform, der omfatter alle de værktøjer, du skal bruge til at oprette og offentliggøre sider.

Web Developer

Chris Pedericks Web Developer bør altid være central, når du arbejder med web-redigering i Firefox. Vi betragter den som essentiel, når du arbejder med css, navnlig på blog-platforme som Wordpress eller Movable Type, hvor det kan være svært at finde ud af, hvilken klasse eller ID der hører til hvilket element.

Denne extension føjer en ny værktøjsbjælke til Firefox, der blotlægger sidens Document Object Model (DOM), så du kan fremhæve sideelementer, se cookies, finde fejl i forme, se objektnavne og så videre.

Du kan også slå målrettede sitefunktioner til eller fra. Du kan for eksempel slukke for JavaScript, billeder, stylesheets, cookies og sågar sidefarver. Vi kan bedst lide muligheden for at se og redigere css.

Med kommandoen »Add User Style Sheet« kan du også knytte gemte styles til siderne og få et smugkig på ændringerne.

Firebug

Firebug er et glimrende supplement til Web Developer. Der er lidt overlapning mellem de to applikationer, men Firebug er bedst til direkte undersøgelse af den underliggende kode, mens Web Developer bruger overlays til at blotlægge DOM på siden.

Brugere af Google Chrome får måske deja-vu, for Firebugs inspektionsvindue minder meget om værktøjet »Inspect Element« i Googles browser. Her får du direkte adgang til koden i en side, og du kan redigere og debugge den i et hierarkisk, DOM-indlejret dokumentvindue.

En af Firebugs bedste funktioner er dens greb om Mozilla JavaScript-konsollen. Den er nem at starte og giver et valg mellem to brugerflader: Enten en enkelt kommandolinje, hvor du kan skrive og teste kode linje for linje, eller et helt tekstvindue, der bruger Firefox’ JavaScript-engine til at eksekvere koden.

Pixel Perfect

Når du har installeret Firebug, skal du tilføje Pixel Perfect. Det er et meget nyttigt værktøj, der gør det muligt at føje et sporingsbillede til den side, du redigerer.

Et sporingsbillede er en gennemsigtig side-mockup, som du bruger til at justere positioneringskoden i siden. Disse to extensions samarbejder om at levere smugkig og manuelle koderedigeringsværktøjer.

Codetch

Codetch går et skridt videre end Web Developer og Firebug. Den tilføjer et komplet web-udviklingsmiljø oven på Firefox. Når du har installeret den, finder du et komplet kode- redigeringsmiljø med smugkig-, design- og kode- visninger, som du kan konfigurere i et opdelt skærmbillede.

Med layoutværktøjer som i et tekstbehandlingsprogram kan du formatere indhold, og indbygget validering sikrer, at siderne er W3C-kompatible og virker, som de skal i Firefox. Det er som at have en tidlig version af Dreamweawer som browser-plugin.

Colourzilla

Colourzilla er et af vores yndlingsværktøjer. Det føjer en eyedropper-funktion til Firefox, så du kan afprøve farve hvor som helst på siden. Hex-kode-aflæsningerne kan derefter sættes direkte ind i tekstbehandleren. Med Colourzilla kan du afprøve flere farver til en side eller føje farver til en palet, mens du opbygger dit eget farvevalg.

Hold [Shift] nede, mens du afprøver pixel. Hvis det område, du vil afprøve, er lille, kan du zoome ind ved at vælge »Zoom«-funktionen fra Colourzillas menu. Der er mange anvendelsesmuligheder lige fra at matche css-farver med et bitmapbillede til at snuppe et farvevalg fra en anden side.

Der er mere endnu. Dobbeltklik på Colourzilla-ikonet i Firefox for at få en komplet rgb-farvesamler. Der er også en paletvisning, der omfatter skræddersyede valg såsom de officielle W3C-farvenavne og klassiske websafe-paletter.

MeasureIt

Colourzilla har en sidste trumf i ærmet – du kan måle mellem to punkter, som du specificerer ved hjælp af eyedropperen. Men hvis du vil have endnu bedre styring, skal du i stedet vælge MeasureIt.

Denne addon trækker et net over et element, så du får nøjagtige målinger og en direkte aflæsning. Det er nyttigt, når du har brug for at matche css-dimensioner til eksisterende komponenter i et layout.

FireFTP

FireFTP indlejrer en komplet ftp-klient i Firefox – og vi mener virkelig komplet. Når FireFTP er indlæst, minder den om ftp-applikationen Firezilla. Det opdelte skærmbillede giver fuld træk og slip-adgang til din lokale desktop og til ftp-servere.

Der er også kommandoværktøjer til at styre fjernfiler. Brug FireFTP til at uploade scripts og filer uden at gå ud af Firefox. Den føjer en meget nyttig samling sitehåndteringsværktøjer til dit browserbaserede udviklingsmiljø.

Firefox Accessibility

De hidtil nævnte extensions er ret gode til at eftergøre de funktioner, du finder hos kommercielle web-udviklingsværktøjer. Web Developer og Codetch omfatter endda funktioner til kodevalidering. Vi anbefaler, at du også tilføjer en testsuite til tilgængelighed.

Hvis du kører en kommerciel site, skal den ifølge loven leve op til EU’s regler om diskrimination af handicappede. Firefox Accessibility samler en række rapporteringsværktøjer, som du kan køre på dine sider i en ny værktøjsbjælke.

Selv om det er et amerikansk værktøj, er der mange sammenfald mellem lovgivningen i USA og EU. Derfor burde denne extension kunne afgøre, om ens side lever op til reglerne.

Denne extension kører i browseren; den har ikke adgang til materialet fra en server. Den tester det oversatte html i siden, mens Firefox renderer det. Denne metode betyder, at du undgår falske fejl, der ellers ville blive skabt.

Kør Internet Explorer i Firefox

Der er en ulempe ved at udvikle sider i vores hjemmelavede Firefox-udviklingsmiljø: De fleste mennesker browser stadig på nettet med Internet Explorer. Du bør altid afprøve på flere browsere, før du sender et site på nettet – og vi kender en bemærkelsesværdig extension, der gør det muligt at gøre det fra Firefox.

Med IETab kan du se sites ved hjælp af Internet Explorers kode. Når den er installeret, skal du højreklikke på en webside for at gå til Internet Explorer-rendering, samtidig med at Firefox bevarer fuld kontrol over brugerfladen.

Desværre vil du opdage, at Web Developer, Firebug og andre ikke virker, mens IETab er aktiv – men du kan hurtigt skifte mellem visningerne og tjekke sidernes browserkompatibilitet.

Installer extensions

Det er nemt at installere Firefox-extensions. Udviklerne laver extensions ved hjælp af Mozilla XPI-formatet og linker dem direkte fra en webside. Når du klikker på fillinket, ser Firefox, at du downloader en extension, og installerer den automatisk ved hjælp af den indbyggede addon-manager.