Debugging refererer til processen med at finde og rette fejl eller defekter i en computerkode, der forhindrer korrekt funktion af en software eller et system. Denne aktivitet kræver ofte detaljeret forståelse af koden, og den bruges til at sikre, at systemet virker som forventet og er fri for fejl.

Bugs altså fejl, er noget vi alle skriver og det sker i hver udviklingsprojektet. Vi kan både øve os i at skrive færre bugs, men også være hurtigere og bedre til at finde løsninger på fejlene, altså debugging.

Hvis man aldrig vil lave en bug eller fejl igen kan man se følgende indlæg - Hvordan man aldrig laver en bug

Softwaretest er et emne som er tæt koblet med debugging og skal gerne virke som en forbyggende foranstaltning som skal fange fejl inden at de opstår eller skal sørge for at vi ikke skriver fejlen i første omgang!

Når vi snakker om debugging er der flere fremgangsmåde, men ofte har vi et specifikt værktøj til det. Ofte er det forbundet med vores IDE, men til JavaScript i browseren kan man også bruge det indbyggede debuggings-værktøj! De gør generelt rigtig mange ting til at hjælpe os med at løse de problemer, som vi ofte selv skaber! Der er ting som intellisense som både kan se om vi laver fejl, men også hjælper os med at færdiggøre kodestykker!

Vi har 3 primære værktøjer som vi gerne vil bruger til at finde fejl og optimere vores kode

Debugging i Visual Studie Code

Microsoft har allerede lavet en meget god guide til at starte med at debugge kode i VSCode!

Den kan findes her:

Debugging i Visual Studio

Introduktion til debugger i Visual Studio & Debugging teknikker og værktøj

Første trin til debugging i Visual Studio på Windows er at åbne dit projekt i Visual Studio og navigere til det script eller kode, du ønsker at debugge. Her er en kort beskrivelse af de mest nødvendige ting. Under det er der lidt mere uddybende om et par emner.

1. Sæt Breakpoints: Klik på den grå bjælke ved siden af linjenummeret på den linje, du ønsker at debugge. Et rødt stoppunkt (breakpoint) vil fremkomme. Når koden kører, vil den stoppe ved denne breakpoint.

1. Kør Din Kode: Klik på 'Start Debugging' eller tryk F5 for at starte din kode. Programmet vil køre indtil det når din breakpoint.

1. Gennemse Din Kode: Nu kan du træde igennem din kode ved at bruge knapperne 'Step Into', 'Step Over' og 'Step Out' eller ved at trykke F10 og F11. Dette giver dig mulighed for at kontrollere, hvordan hvert trin i koden udføres og se værdierne af forskellige variabler på hvert trin.

Fra venstre, Step into (F11), Step over (F10) og Step out (Shift + F11)

1. Se Variabler: I 'Autos' og 'Locals' fanerne kan du se de aktuelle værdier af dine variabler. Dette kan hjælpe dig med at finde, hvor tingene går galt.

1. Ændre Variabelværdier: Du kan ændre værdien af variabler midt i en debugging session ved at højreklikke på variabelnavnet i 'Autos' eller 'Locals' fanen og vælge 'Modify Value'. Dette kan være nyttigt til at teste, hvordan forskellige værdier påvirker udførelsen af din kode.

2. Fortsæt Kørsel: Når du er færdig med at træde igennem din kode, kan du trykke 'Continue' eller F5 for at fortsætte kørslen af din kode.

Husk, at debugging er en proces, og det kan tage tid at finde og løse fejl. Men med praksis og tålmodighed vil du blive mere dygtig til det.

Breakpoints

I Visual Studio er der fem forskellige typer af breakpoints, der kan hjælpe med at gøre debugging-processen mere effektiv:

1. Breakpoint: Dette er den mest almindelige type breakpoint, som stopper udførelsen af programmet ved en bestemt linje i koden.
2. Condition Breakpoint: Dette breakpoint stopper kun udførelsen af programmet, hvis en bestemt betingelse er opfyldt. For eksempel kan du sætte et condition breakpoint, der stopper udførelsen, hvis en variabel når en bestemt værdi.
3. Tracepoint: Dette er en speciel type breakpoint, der ikke stopper udførelsen af programmet, men i stedet logger en besked eller udfører en bestemt handling. Dette er nyttigt for at spore, hvad der sker i programmet uden at skulle stoppe det.
4. Temporary Breakpoint: Dette er en type breakpoint, der kun er aktiv én gang. Når programmet når dette breakpoint, stopper det, og breakpointet fjernes derefter. Det er nyttigt, hvis du har et bestemt sted i koden, du vil inspicere, men kun én gang.
5. Dependent Breakpoint: Dette er en type breakpoint, der kun aktiveres, når et andet breakpoint bliver ramt. Det er nyttigt, hvis du kun ønsker at stoppe udførelsen på et bestemt punkt i koden, efter et andet bestemt punkt er blevet ramt.

Generelt bruger vi kun vores normale standart breakpoint, men der er nogle enkelte cases, hvor de andre er fordelagtige.

Udover de indbyggede debuggingsværktøjer, har Visual Studio også rigtig gode værktøjer til at lave og skrive Softwaretest, såsom Unit test.

Microsoft har et læringsforløb som tager os igennem de simple dele af det her

Use Visual Studio for modern development - Training

For generel C# test-arbejde kan man læse mere her.

Debugging i Chrome DevTools

Debug JavaScript - Chrome for Developers

Debugging er processen med at finde og rette fejl i en kode. Det kan omfatte at identificere og analysere fejl, lokalisere kilden til fejlen, og rette fejlen. I JavaScript kan man bruge debugging værktøjer som Chrome DevTools til at finde og rette fejl i koden. Chrome DevTools giver brugeren mulighed for at inspicere, analysere, teste og debugge koden. Det er et kraftfuldt værktøj til at finde og rette fejl i JavaScript kode.

Breakpoints

Et breakpoint i Chrome DevTools er et punkt i koden, hvor du kan stoppe koden og inspicere den. Det giver dig mulighed for at se hvordan dine variabler og værdier ændrer sig, mens programmet kører. Det giver dig også mulighed for at tråde igennem koden linje for linje, så du kan se hvordan koden udfører hvert trin. Dette giver dig et bedre overblik over koden og hjælper dig med at finde fejl.

Her ser vi både vores Call-stack, alle vores variabler som vores heap-stack holder styr på og hvilket break points vi har i vores kode:

Chrome Lighthouse

Memory

Find et memory leak med devtools - https://www.youtube.com/shorts/XQMVOoPZLYs