Developer toolbars til css, validering, fejlfinding m.m.

[MrsAnn]

På opfordring kommer hermed en guide til at bruge nogle af de devoloper tools der findes til Internet Explorer og Firefox:

Til Internet Explorer 7 kan det gratis program downloades her:

Iflg. Microsoft er den ikke kompatibel med IE8 og jeg kan ikke huske, om den blot var integreret heri efter installation. Hvis den er (eller hvis du har downloadet ovenstående), finder du den under Funktioner og i IE 8 Udviklerværktøjer (F12 virker i både IE7 samt 8 til at starte programmet). I IE 8 skal du selv "docke" den på skærmen, ellers lægger den sig som et vindue oveni det browservindue du prøver at fejlfinde i, og det bliver du hurtigt træt af. I IE 7 lægger den sig selv i bunden af skærmen, i IE 8 skal du klikke CTRL+P eller det lille ikon under krydset i højre hjørne.

Jeg bruger primært værktøjet til at finde ud af, hvor i mit CSS der skal rettes.

I den lille skærm du nu har ovenpå din hjemmeside, skal du i højre side skifte til Attributter og til venstre klikke på den lille hvide pil. Nu kan du så pege på elementer på din hjemmeside, som du ønsker at se properties for. Det rigtig gode er, at du rent faktisk kan prøve ting af i dit stylesheet uden at skulle uploade via FTP, opdatere browser osv. for at se ting slå igennem.

Lad os lave en lille case:
I en osC ønsker du at finde ud af, hvor du retter baggrundsfarven på din navigationslinie (der hvor der står: Du er her, Forside, Produkter, osv. øverst under logo til venstre). Du bruger IE Dev. Tool bar ved at vælge den lille pil i dit dialogboxvindue, husk Attributterne i højre side af skærmen. Du klikker på linien ved siden af teksten, og kan i IE Dev. Tool nu se html koden, hvor headerNavigation nu er markeret med blåt. Så det er altså den class du skal finde i dit stylesheet for at rette baggrundsfarven. Til højre på din skærm, kan du under værdier se, hvilke attributter der allerede er defineret. Prøv at dobbeltklikke i Navn og skriv: background-color og i Værdi skriver du: pink. Nu ændrer baggrundsfarven sig til pink i din navigationsbjælke i din shop. Så hvis du vil rette denne farve i dit layout, skal du altså have fat i classen headerNavigation og rette her i stylesheet'et

Tilsvarende findes der et værktøj til FireFox, som hedder Firebug. Det kan installeres direkte fra browseren ved at vælge Funktioner, Udvidelser og så søge på Firebug, herefter følger du anvisningerne på skærmen og installerer. Ligesom i IE åbnes programmet med F12. Det er samme princip som i IE, her klikker du på den lille pil i firkanten ude i venstre side (ved siden af Firebug'gen:-) Ilfg. mange, er dette værktøj meget bedre end IE Dev. Tool Bar - bl.a. kan man slå ting fra/til direkte i dialogboksen til højre, i stedet for at skrive sig frem til dem med css. Men jeg er ikke blevet så fortrolig med Firebug endnu, da jeg kun bruger det i de tilfælde, hvor tingene ser anderledes ud i hhv. IE og FF.

En par ting mere: IE Tool bar kan også bruges til at validere din html og css direkte hos W3C - også nyttigt, hvis man går op i det:-)
Tool bar i IE 8 kan simulere IE 7 og vise stier til billeder.

Håber, ovenstående kan hjælpe jer i gang med disse geniale værktøjer. I det omfang jeg kan, hjælper jeg gerne, så godt jeg kan med at bruge dem:-)

[benilope]

En lille tilføjelse Firebug kan hvis den er sat rigtigt op rette i eks. stylesheet - men her er det nødvendigt at læse instruktionen igennem måske flere gange - det er et kraftigt værktøj og opretter ikke automatisk en backup.

Personligt anvender jeg Firebu sammen med EditPlus, åbner css med ftp igennem editplus og sætter ændringer her, save and upload - ser det ikke rigtigt ud trykkes fortryd (Ctrl+z) save og upload og udseendet er tilbage

/Per

[cms]

Der er også et rigtigt fedt "developer tool" indbygget i Google Chrome, med mulighed for bl.a. load-tider, samtlige ressourcer der loades ind og meget mere. Og ellers kan jeg også anbefale Fiddler: http://www.fiddler2.com/fiddler2/ Det kan fungere uanset browser, og måler og analyserer alle http request og trafik osv. der kører til og fra sitet - et rigtig powerfull værktøj til dem der går op i detaljen