Felsök TypeScript-applikationen med Chrome Developer Tools

I denna handledning visar jag dig hur du kan felsöka en enkel TypeScript-applikation som simulerar en miniräknare. Målet är att identifiera felet som gör att additionen av två tal inte ger det förväntade resultatet. I denna praktiska övning använder vi Chrome Developer Tools för att analysera koden och hitta felet snabbt. Genom den här handledningen kommer du att förstå vikten av felsökning och vilka verktyg som kan hjälpa dig.

Viktigaste insikter

• Genom att använda Chrome Developer Tools kan du enkelt analysera tillståndet för din applikation.
• Typkontrollen i TypeScript hjälper till att upptäcka fel i ett tidigt skede innan koden körs.
• Betydelsen av typer och korrekt hantering av värden är avgörande för att undvika fel.

Steg-för-steg-guide

Börja med att starta din Chrome-webbläsare och ladda webbapplikationen med TypeScript-implementeringen av miniräknaren. Projektet bör redan köras på en server så att du kan öppna HTML-filen i Chrome.

Kontrollera sedan att både TypeScript-filen och JavaScript-filen (transpilerad fil) finns i ditt projekt. TypeScript-filen innehåller kommentarer och typinformation, medan de transpilerade JavaScript-filerna inte innehåller denna information.

Öppna Chrome Developer Tools genom att högerklicka på sidan och välja "Inspect" eller tryck F12. Gå till fliken "Elements" för att se sidans HTML-kod och kontrollera att inmatningsfälten samt knappen är korrekt inställda.

Miniräknaren har två inmatningsfält för tal och en knapp för att starta additionen. Du kan ange några testvärden och klicka på knappen. Du kommer att märka att summan inte beräknas korrekt; du kan exempelvis få 22 istället för förväntade 4. För att klargöra denna avvikelse krävs felsökning.

Ställ nu in en brytpunkt i din kod genom att klicka på funktionen för händelselyssnaren. Detta görs i avsnittet som är ansvarigt för additionen. När du skriver värden i inmatningsfälten och klickar på knappen ska du gå in i felsökaren.

I felsökarvyn kan du inspektera variablerna. Det är särskilt viktigt att kontrollera innehållet och värdena i inmatningsfälten för att se vilka värden som skickas. Du kommer att märka att värdena i inmatningsfälten är av typen String och inte Number, som du förväntade dig.

Denna typkonflikt leder till att additionen inte fungerar korrekt. Istället för att addera talen, sker en konkatenering av dem. Ett exempel skulle vara: om du anger "1" och "6" kommer du att få "16" som resultat, vilket inte är det önskade resultatet. Det här logiska felet är lätt att förstå men viktigt att identifiera.

Nu måste du åtgärda felet. Gå tillbaka till din TypeScript-fil i Visual Studio Code och ändra hur värdena hanteras. Istället för n1.value + n2.value bör du använda n1.valueAsNumber + n2.valueAsNumber för att säkerställa att det är tal och inte strängar.

Efter att du har gjort ändringen, spara filen och uppdatera sidan i Chrome. Sedan bör du titta på värdena i inmatningsfälten igen innan du adderar dem. Denna gång kommer den korrekta summan av två tal att visas.

Om allt har gjorts korrekt ska summan "10" visas när du trycker på knappen och till exempel anger värdena "2" och "8". På så sätt har du framgångsrikt löst felet och lärt dig hur viktig typhållning är i TypeScript.

Utöver det kan du dra nytta av fördelarna med TypeScript genom att tydligt definiera variablernas typer. Detta minskar möjligheten till körfel avsevärt. Se alltid till att ange typer för att underlätta felsökning.

Till sist har du också sett hur viktiga Chrome-utvecklarverktygen är för att analysera kod och beteende i en applikation i realtid. Att debugga med dessa verktyg kan väsentligt bidra till förbättring av dina utvecklingsprocesser.

Sammanfattning

I den här handledningen har du lärt dig hur du kan debugga en enkel TypeScript-applikation. Särskild uppmärksamhet lades på användningen av Chrome Developer Tools med hänsyn till typerna i TypeScript. Till slut har du insett hur viktigt det är att upptäcka fel tidigt och hur viktig typkontrollen kan vara i TypeScript.