Udvikler konsollen

Kode er nsten dmt til at indeholde fejl. Du vil nsten helt sikkert lave fejl jvnligt hvad snakker jeg om? Du vil helt sikkert lave fejl i hvert fald, hvis du er menneske og ikke en robot.

Men, i en browser ser du ikke umiddelbart fejlene. S, nr noget gr galt er det ikke altid muligt at se i browseren og derfor heller ikke muligt at fikse fejlen.

For at se fejlene og samtidig f en masse anden brugbar information om din kode, s findes der en rkke vrktjer i browseren kaldet developer tools.

Mange udviklere hlder til at bruge Chrome eller Firefox fordi deres vrktjer er meget udviklede. Andre browsere tilbyder ogs udviklingsvrktjer, nogle gange med specielle features, men prver normalt at samle op p mulighederne fra Chrome eller Firefox. De fleste udviklere har en favorit browser og skifter til de andre for at teste browserspecifikke problemer.

Udviklingsvrktjerne har mange praktiske features. Til at starte med, skal du lre at bne dem, kigge efter fejl og afvikle JavaScript kommandoer.

Google Chrome

bn siden bug.html.

Der er en fejl i sidens JavaScript kode. Det er skjult for den besgende, s bn udviklingsvrktjerne (developer tools) for at se dem.

Tryk F12 eller, hvis du er p Mac Cmd+Opt+J.

Udviklingsvrktjerne vil bne med tabben KOnsol (Console) som standard.

Det ser ud i stil med dette:

[]

Det prcise udseende vil afhnge af din version af Chrome. Det skifter fra tid til anden men burde minde om billedet.

• Her kan du se fejlmeddelelsen i en rd farve. I det her tilflde indeholder scriptet en ukendt lalala kommando.
• Til hjre er et klikbart link til kildekoden bug.html:12 med den linje i koden, hvor fejlen er opstet.

Under fejlmeddelelsen er det et blt > symbol. Det markerer en kommandolinje hvor du kan skrive JavaScript kommandoer. Tryk Enter for at afvikle dem.

Nu har du lrt, hvor du kan se fejl, og det er nok til en begyndelse. Du kommer tilbage til udviklingsvrktjerne senere og lrer om at finde fejl (debugge) i kapitlet Artiklen "debuggingD-chrome" blev ikke fundet.

Firefox, Edge og andre

De fleste browsere bruger F12 for at bne udviklingsvrktjerne

Udseendet og mden de virker p er ret ens. S snart du kender til n af browsernes vrktjer, kan du nemt skifte til de andre.

Safari

Safari (Mac browser, ikke understttet af Windows/Linux) er lidt speciel her. Du er nd til frst at aktivere Udviklermenu (Develop menu) frst.

bn indstillingerne og g til Avanceret (Advanced) tab. Her er der en checkbox nederst:

[]

Nu kan Cmd+Opt+C bne konsollen. Derudover har du en menu i toppen kaldet Udvikler (Develop) med en rkke muligheder.

Opsummering

• Udviklingsvrktjer gr det muligt at se fejl, afvikle kommandoer, undersge variable og meget mere.
• De kan bnes med F12 i de fleste browsere p Windows. Chrome for Mac bruger Cmd+Opt+J, Safari: Cmd+Opt+C (Husk, at bne for muligheden i indstillinger).

Nu er udviklingsmiljet sat op. I den nste sektion, skal du dykke ned i JavaScript sproget.