Fejlfinding & kvalitet
Fejlfind systematisk i browserens DevTools
Console, Elements, Network og breakpoints
Når noget ikke virker, er browserens udviklerværktøjer din vigtigste kilde. En systematisk runde gennem panelerne finder de fleste fejl hurtigere end at gætte i koden.
- 01
Åbn DevTools
Tryk F12 (eller højreklik → Undersøg). Værktøjerne åbner ved siden af siden. Gør det til en vane at have dem åbne mens du udvikler, så du fanger fejl med det samme i stedet for senere.
- 02
Læs Console-panelet først
Røde fejl i Console fortæller ofte præcis hvad og hvor det gik galt — læs beskeden OG filnavn/linjenummer. Klik på linket for at hoppe til stedet i koden. Ryd konsollen og genskab fejlen, hvis der er meget støj.
Læs fejlbeskeden HELE vejen — svaret står tit i den sidste halvdel.
- 03
Inspicér DOM og CSS i Elements
I Elements ser du den faktiske DOM, browseren har bygget — ikke din kildefil. Klik på et element og se hvilke CSS-regler der rammer det i Styles, og hvilke der er overskrevet (streget ud). Her fanger du specificitets- og arve-problemer.
- 04
Tjek kaldene i Network
Genindlæs siden med Network åben og se alle forespørgsler: statuskode, størrelse og svartid. Røde/4xx-5xx-rækker afslører et fejlende API-kald eller en fil der ikke findes. Klik på et kald for at se selve svaret.
Ser data ikke ud på siden? Tjek her, om kaldet overhovedet lykkedes.
- 05
Sæt breakpoints i Sources
For logikfejl, sæt et breakpoint på en linje i Sources-panelet. Koden stopper der, og du kan inspicere variablernes værdier og gå linje for linje. Det er langt mere præcist end at strø `console.log` ud over det hele.
- 06
Isolér, ret og verificér
Når du har fundet den mistænkte linje, lav én ændring ad gangen og genskab fejlscenariet for at bekræfte, at den er væk — og at intet andet gik i stykker. Ret aldrig fem ting på én gang; så ved du ikke hvad der virkede.
God faglig praksis i faget samt uddannelsens artikel «JavaScript og DOM — gør siden levende».