Bliv webudvikler på 12 trin med Firebug

Skrevet af Esben Rasmussen i Webudvikling      2 kommentarer      

apr
30

Da jeg fik mine første erfaringer med webudvikling involverede det statiske hjemmesider, men ret hurtigt fandt jeg ud af, at der hvor det sjove lå, var ved dynamiske hjemmesider, hvor alt let kan skiftes ud. Problemet med denne dynamik var bare, at jeg ikke længere havde særlig stor gavn af min WYSIWYG-editor, da dynamiske hjemmesider gør brug af kode, som kun kan blive afviklet på en server.

I WYSIWYG-editoren kunne jeg nu kun se en smule af indholdet, mens langt størstedelen slet ikke var synlig for mig, da disse kodedele først ville blive tilføjet på webserveren.

Kort sagt: skal du arbejde med et CMS i din webudvikling, så kan du kun se hele hjemmesiden, når den ligger på en server.

Heldigvis kan alle med få ekstra gratis web værktøjer blive webudviklere og lære at arbejde med CMS ved at lave deres helt egen WYSIWYG-editor til CMS’er.

Først skal du dog have installeret Firefox samt installeret tilføjelsen Firebug

Med følgende 12 simple trin, kan du forvandle din browser til et effektivt webudviklingsværktøj, hvor du kan teste nye layouts – uden risiko for at ødelægge det, som alle andre ser.

Eksempel på sikker redigering af live website

Kort sagt: Du får her opskriften på dit helt eget sikre udviklingsmiljø, hvor du kan teste løs uden at genere andre brugere af hjemmesiden.

1. Åbn Firefox
2. Højreklik på browseren et tomt sted til højre for menupunktet ”Hjælp”



3. Klik på ”Tilpas…”



4. I vinduet Tilpas værktøjslinie find
5. Træk i ”Inspicér” ikonet



6. Træk nu ikonet ud i din browser – f.eks. til venstre for adresselinjen



7. Klik på for at aktivere kode inspicering



Et vindue åbner i bunden af din browser, hvor du kan se den kode, som den hjemmeside, du kigger på, består af.



8. Bevæg nu musens markør rundt over de forskellige elementer på hjemmesiden og se hvordan forskellige dele af koden bliver fremhævet i det nederste vindue



Manipulér med hjemmesiden

9. Markøren flyttes over et element på hjemmesiden – her linket ”Annoncér med Google” – og klik med musen



10. I koden er den del, som er ansvarlig for at lave linket, fremhævet



11. Klik på den del af koden, som du ønsker at ændre



12. Tilføj din egen ændring og afslut med et tryk på Enter



13. Du kan nu se, hvordan hjemmesiden ændrer sig, fordi du har ændret i koden

Når man ændrer i koden på denne måde, sker der kun ændringer i den version af hjemmesiden, som er lagret (cached) i den midlertidige hukommelse på ens egen computer. Man kan derfor i ro mag kan teste, hvad en bestemt ændring vil gøre for layoutet, og når man har fundet et resultat, man er tilfreds med, så kan man gå ind og gemme ændringen i de filer, som selve hjemmesiden er opbygget af.