Fejlfinding & kvalitet
Troubleshoot systematically in the browser's DevTools
Console, Elements, Network and 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.
Å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.
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.
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.
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.
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.
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.
Source
God faglig praksis i faget samt uddannelsens artikel «JavaScript og DOM — gør siden levende».