Feilsøke TypeScript-applikasjonen med Chrome Developer-verktøyene

I denne veiledningen viser jeg deg hvordan du kan feilsøke en enkel TypeScript-applikasjon som simulerer en kalkulator. Målet er å identifisere feilen som gjør at addisjon av to tall ikke gir forventet resultat. I denne praktiske øvelsen vil Chrome Developer Tools brukes til å analysere koden og raskt finne feilen. Gjennom denne veiledningen vil du forstå viktigheten av feilsøking og hvilke verktøy som kan hjelpe deg.

Viktigste funn

• Ved å bruke Chrome Developer Tools kan du enkelt analysere tilstanden til applikasjonen din.
• Type-sjekking i TypeScript hjelper til med å oppdage feil tidlig, før koden kjøres.
• Betydningen av typer og riktig håndtering av verdier er avgjørende for å unngå feil.

Trinn-for-trinn-veiledning

For det første starter du Chrome-nettleseren og laster inn webapplikasjonen med TypeScript-implementeringen av kalkulatoren. Prosjektet bør allerede kjøre på en server, slik at du kan åpne HTML-filen i Chrome.

Sørg nå for at både TypeScript- og JavaScript-filen (transpilert fil) er til stede i prosjektet ditt. TypeScript-filen inneholder kommentarer og typeinformasjon, mens de transpilerte JavaScript-filene ikke inneholder denne informasjonen.

Åpne Chrome Developer Tools ved å høyreklikke på siden og velge "Inspect" eller trykke F12. Gå til fanen "Elements" for å se HTML-koden på siden, og bekrefte at inndatafeltene samt knappen er korrekt satt opp.

Kalkulatoren har to inndatafelt for tallene og en knapp for å trigge addisjonen. Du kan legge inn noen testverdier og trykke på knappen. Du vil legge merke til at summen ikke beregnes riktig; du får kanskje 22 i stedet for forventet 4. For å avklare denne avviket, kreves feilsøking.

Sett nå en bryterpunkt i koden din ved å klikke på funksjonen til hendelseslytteren. Dette skjer i seksjonen som er ansvarlig for addisjonen. Når du skriver inn verdiene i inndatafeltene og trykker på knappen, bør du gå inn i feilsøkeren.

I feilsøkervisningen kan du inspisere variablene. Det er spesielt viktig å sjekke teksten inne og verdiene i inndatafeltene for å se hvilke verdier som sendes. Du vil oppdage at verdiene i inndatafeltene er av typen String, ikke av typen Number som du hadde forventet.

Dette typenkonflikten fører til at addisjonen ikke fungerer riktig. I stedet for å legge sammen tallene, blir de konkatenert. Et eksempel er inntasting av "1" og "6" som gir "16" som resultat, noe som ikke er det ønskede resultatet. Denne logiske feilen er lett å forstå, men viktig å identifisere.

Nå bør du rette opp feilen. Gå tilbake til TypeScript-filen din i Visual Studio Code og endre hvordan verdiene behandles. I stedet for n1.value + n2.value bør du bruke n1.valueAsNumber + n2.valueAsNumber for å sikre at det er tall og ikke strenger.

Etter at du har gjort endringen, lagre filen og last siden på nytt i Chrome. Se deretter på verdiene i inndatafeltene igjen før du legger dem sammen. Denne gangen vises den riktige summen av to tall.

Hvis alt er gjort riktig, vil summen bli vist som "10" når du trykker på knappen, for eksempel hvis du skriver inn verdiene "2" og "8". Dermed har du løst feilen og lært hvor viktig typisitet er i TypeScript.

Du kan også dra nytte av fordelene med TypeScript ved å tydelig definere variabeltypene. Dette reduserer betydelig muligheten for kjøretidsfeil. Pass alltid på å spesifisere typer for å lette feilsøkingen.

Til slutt har du også sett hvor viktig Chrome Developer Tools er for å analysere koden og oppførselen til en applikasjon i sanntid. Debugging med disse verktøyene kan vesentlig bidra til å forbedre utviklingsprosessene dine.

Oppsummering

I denne veiledningen har du lært hvordan du kan debugge en enkel TypeScript-applikasjon. Spesiell oppmerksomhet ble rettet mot bruken av Chrome Developer Tools med tanke på typene i TypeScript. Til slutt har du forstått hvor viktig det er å oppdage feil tidlig og hvor viktig typekontrollen i TypeScript kan være.