Denne artikel er skrevet af Peter Davidsen, http://beddet.dk, beddet@beddet.dk, http://twitter.com/beddet.

Store websites kan godt være svære at håndtere og overskue efterhånden som de bliver større. Javascript er meget amindeligt på nutidens hjemmesider, frameworks og mange seperate klasse filer til alt muligt kan ligge i en masse mapper som gør det svært at se hvor ting bliver hentet og kaldt fra. Til dette kan man med stor success bruge profileren i developer toolbaren, men det hjælper stadig ikke meget med selve overblikket af ens site. Udover alle ens egne filer er det heller ikke ualmindeligt at have kald til sider som Google, ads, analytics, diverse bannere osv. Det som toolbaren er god til er markup og javascript filer og derfor kan man navigere rundt i disse; debugge, profile og rette lidt i dem. Til denne artikel kigger jeg på ekstrabladets hjemmeside (ekstrabladet.dk) da det har lidt af hvert.

I toolbaren har vi adgang til 3 lidt spændende faner, HTML, CSS og Script; html fanen vil jeg ikke komme meget ind på, men derimod de 2 andre.

Efter at have navigeret ind på ekstrabladets hjemmeside og åbnet dev toolbaren får jeg følgende skærm frem. Som standard starter man i html fanen dog går vi over under css for at kigge på de stylesheets sitet bruger. Der er automatisk loadet et stylesheet og deri kan vi se alle de tags der er inkluderet som vist på billedet. Man kan collapse dem og nemt gemme hele filen uden at skulle manuelt kopiere teksten og føre over i et nyt dokument, det kan være rart hvis man arbejder med ens eget site og er ved at lave opdateringer og derfor gerne vil have backup af de forskellige versioner man får lavet sig.

Mange sider har forskellige stylesheets alt efter hvilken underside man er på, der kan være forskellige farvetemaer der bliver anvendt, fx rød og grøn til jul. Eller generelt bare for at dele ens kode lidt op så det bliver mere overskueligt når der skal

ændres ting.

Vi får en drop down menu som indeholder en liste af alle de stylesheets toolbaren kan finde referrencer til og deres komplette sti, herved er det nemt at finde frem til den fil man skal bruge.

Jeg klikker frem til Script fanen for at få lidt samme stil som den skærm jeg allerede er på. Under dette punkt får man adgang til javascript debuggeren, en konsol som debuggeren bruger og endnu en drop down menu.

Man får en masse kildekode frem i venstre side som er det man også får at se hvis man siger ”Vis Kildekode” direkte i ens browser, blot med noget syntax farvning. Højreside er forbeholdt konsollen som viser fejl den finder eller man kan udskrive ved hjælp af console klassen i javascript. Søge feltet øverst kan også være meget praktisk når man skal lede efter bestemte ting i ens kildekode og resultaterne bliver markeret med gult.

Ligesom under css fanen får vi en drop down liste med forskellige javascript filer, den her liste er dog lidt sjovere end den sidste.

Som standard får vi vist ekstrabladet.dk som er under et underafsnit der simpelthen hedder http://ekstrabladet.dk. Lige under får vi linket til en mappe der ligger på serveren som indeholder 4 javascript filer som vi kan navigere ind til.