Fejlfinding af TypeScript-applikation med Chrome Developer-værktøjer

I denne vejledning viser jeg dig, hvordan du kan debugge en simpel TypeScript-applikation, som simulerer en lommeregner. Målet er at identificere fejlen, der forhindrer, at additionen af to tal giver det forventede resultat. I denne praktiske øvelse vil vi benytte Chrome Developer Tools til at analysere koden og finde fejlen hurtigt. Gennem denne vejledning vil du forstå, hvor vigtigt debugging er, og hvilke værktøjer der kan hjælpe dig.

Vigtigste erkendelser

• Ved at bruge Chrome Developer Tools kan du nemt analysere din applikations tilstand.
• Typetjek i TypeScript hjælper med at opdage fejl tidligt, inden koden køres.
• Betydningen af typer og korrekt håndtering af værdier er afgørende for at undgå fejl.

Trin-for-trin-vejledning

Start med at åbne din Chrome-browser og indlæs webapplikationen med TypeScript-implementeringen af lommeregneren. Projektet bør allerede køre på en server, så du kan åbne HTML-filen i Chrome.

Sørg nu for, at både TypeScript- og JavaScript-filen (transpileret fil) er til stede i dit projekt. TypeScript-filen indeholder kommentarer og typeinformationer, mens de transpilerede JavaScript-filer ikke indeholder disse informationer.

Åbn Chrome Developer Tools ved at højreklikke på siden og vælge "Undersøg" eller ved at trykke på F12. Gå til fanen "Elementer" for at se HTML-koden på siden og sikre dig, at inputfelterne samt knappen er korrekt opsat.

Lommeregneren har to inputfelter til tallene og en knap til at udføre additionen. Du kan indtaste nogle testværdier og klikke på knappen. Du vil opdage, at summen ikke beregnes korrekt; du får måske 22 i stedet for de forventede 4. For at afklare denne afvigelse er debugging påkrævet.

Lav en breakpoint i din kode ved at klikke på event listener-funktionen. Dette sker i sektionen, der er ansvarlig for additionen. Når du indtaster værdierne i inputfelterne og klikker på knappen, skal du kunne træde ind i debuggeren.

I debuggerens visning kan du inspicere variablerne. Det er især vigtigt at kontrollere indholdet og værdierne af inputfelterne for at se, hvilke værdier der sendes videre. Du vil opdage, at værdien af inputfelterne er af typen string og ikke nummer, som du havde forventet.

Denne typenkonflikt resulterer i, at additionen ikke fungerer korrekt. I stedet for at summe tallene, konkatenes de. Et eksempel kunne være: indtastning af "1" og "6" resulterer i "16" som resultat, hvilket ikke er det ønskede resultat. Denne logiske fejl er let at forstå, men vigtigt at identificere.

Du bør nu rette fejlen. Gå tilbage til din TypeScript-fil i Visual Studio Code og ændre måden, hvorpå værdierne behandles. I stedet for n1.value + n2.value, bør du bruge n1.valueAsNumber + n2.valueAsNumber for at sikre, at det er tal og ikke strenge.

Efter at have foretaget ændringen, gem filen og genindlæs siden i Chrome. Du bør derefter kigge på værdierne i inputfelterne, før du adderer dem. Denne gang vises den korrekte sum af to tal.

Hvis alt er gjort korrekt, vil summen "10" blive vist, når du trykker på knappen efter at have indtastet værdierne "2" og "8", for eksempel. På den måde har du succesfuldt rettet fejlen og lært vigtigheden af typning i TypeScript.

Desuden kan du udnytte fordelene ved TypeScript ved klart at definere variablernes typer. Dette minimerer risikoen for runtime-fejl betydeligt. Vær altid opmærksom på at angive typer for at gøre debugging nemmere.

Til sidst har du også set, hvor vigtige Chrome Developer-værktøjerne er for at analysere en applikations kode og adfærd i realtid. Fejlfinding med disse værktøjer kan bidrage væsentligt til forbedring af dine udviklingsprocesser.

Resumé

I denne vejledning har du lært, hvordan du kan debugge en simpel TypeScript-applikation. Der blev lagt særlig vægt på brugen af Chrome Developer-værktøjer med fokus på typer i TypeScript. Du har til sidst erkendt, hvor vigtigt det er at opdage fejl tidligt, og hvor vigtig typetjek i TypeScript kan være.