tip

Bliv webudvikler på 12 trin med Firebug

Skrevet af Esben Rasmussen i Webudvikling     Comments 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

HTML manipuleret billede af Googles forside

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. clip_image001

  4. Klik på ”Tilpas…”
  5. clip_image003

  6. I vinduet Tilpas værktøjslinie find clip_image005
  7. Træk i ”Inspicér” ikonet
  8. clip_image006

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

  11. Klik på clip_image005[1] for at aktivere kode inspicering
  12. clip_image008

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

    clip_image009

  13. 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
  14. clip_image010

    Manipulér med hjemmesiden

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

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

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

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

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

clip_image015

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.

2 kommentarer til “Bliv webudvikler på 12 trin med Firebug”

  • Hvordan gemmer man siden, når man har ændret det i firebug ??

    Hilsen Heine

    • Hej Heine

      Mit råd er, at når du tester ændringerne i Firefox, så noterer du dem i f.eks. et skriveprogram eller i dit hjemmesideudviklingsværktøj.

      Når du har fundet en opsætning, som gør at din side vises tilfredsstillende, så kopierer/indsætter du de testede ændringer i de html/php/asp(x)/css filer, som er nødvendige for at rendere siden.

      Hvis du i stedet blot vil gemme den enkelte side til senere (f.eks. for at demonstrere noget), efter du har tilføjet ændringer i HTML’en, kan du sørge for at fanen “HTML” er aktiv i Firebug og så højreklikke på det første element i listen: . Når du har højreklikket på skal du vælge kopier HTML. Nu indsætter du indholdet i f.eks. Wordpad og gemmer filen som en “****.html”-fil (erstat **** med dit eget valgfrie navn). Næste gang du klikker på filen, skulle den gerne åbne siden i din browser.

Post comment on Esben Rasmussen

Please insert the signs in the image: