Bliv en hurtigere webudvikler med browserværktøjer

Selvom langt de fleste webudviklere heldigvis er bekendt med dem og udnytter dem i stor stil så ser jeg stadig overraskende mange, der endnu ikke har opdaget fordelene ved eller måske endda slet ikke kender til de forskellige udvikler-værktøjer, der findes til de forskellige browsere og her tænker jeg først og fremmest på værktøjslinjerne Developer Tools til Internet Explorer og Chrome samt Firebug til Firefox.

Disse værktøjer tillader dig som udvikler at inspicere hvert eneste element på en hjemmeside og lader dig få overblik over hvilke styles, der er tilknyttet til dem og hvor de kommer fra. Ydermere, og nok den vigtigste del, så kan du redigere direkte i koden og se ændringerne slå igennem med det samme hvilket virkelig er noget der kan speede ens udvikling op. Går man lidt dybere ind i værktøjslinjerne findes også masser af andre hurtige genveje og guldkorn – fx en netværksoversigt så du kan se hvilke filer, der er blevet hentet og hvor lang tid det har taget, en konsol så du kan følge med i eventuelle script-fejl samt eksekvere javascript direkte, link til validering af koden, skift af browsertilstand (fx IE7 eller IE8) og dokumenttilstand (fx standarder eller quirks-mode), rydning af cache og en profiler til at analysere eksekveringstider for scripts. Der er altså nok at gå i gang med og der er ingen grund til at vente!

Developer Tools er installeret som standard i Internet Explorer 9 samt Chrome mens du selv skal installere Firebug. Alle 3 værktøjer får du frem ved at trykke på F12.

Internet Explorer Developer Tools

Firefox Firebug

Chrome Developer Tools