W tej instrukcji pokażę Ci, jak debugować prostą aplikację TypeScript, która symuluje kalkulator. Celem jest zidentyfikowanie błędu, dlaczego dodawanie dwóch liczb nie daje oczekiwanego wyniku. W tej praktycznej ćwiczebnej zastosowane zostaną narzędzia Chrome Developer Tools, które pozwolą przeanalizować kod i szybko znaleźć błąd. Dzięki tej instrukcji zrozumiesz, jak ważne jest debugowanie i jakie narzędzia mogą Ci w tym pomóc.
Najważniejsze wnioski
- Korzystając z narzędzi Chrome Developer Tools, możesz łatwo analizować stan swojej aplikacji.
- Sprawdzenie typów w TypeScript pomaga w wykryciu błędów na wczesnym etapie, przed wykonaniem kodu.
- Znaczenie typów i właściwe zarządzanie wartościami są kluczowe dla uniknięcia błędów.
Instrukcja krok po kroku
Najpierw uruchom przeglądarkę Chrome i załaduj aplikację internetową z implementacją TypeScript kalkulatora. Projekt powinien już działać na serwerze, więc można otworzyć plik HTML w Chrome.
Sprawdź teraz, czy zarówno plik TypeScript, jak i plik JavaScript (skompilowany) znajdują się w projekcie. Plik TypeScript zawiera komentarze i informacje o typach, podczas gdy skompilowane pliki JavaScript nie zawierają tych informacji.
Otwórz narzędzia Chrome Developer Tools, klikając prawym przyciskiem myszy na stronie i wybierając „Inspekcja” lub naciskając klawisz F12. Przejdź do karty „Elements”, aby zobaczyć kod HTML strony i upewnij się, że pola wprowadzania oraz przycisk są poprawnie skonfigurowane.
Kalkulator ma dwa pola wprowadzania liczb oraz przycisk do uruchomienia dodawania. Możesz wprowadzić kilka wartości testowych i kliknąć przycisk. Zauważysz, że suma nie jest obliczana poprawnie; być może otrzymasz 22 zamiast oczekiwanego 4. Aby wyjaśnić tę różnicę, konieczne jest debugowanie.
Teraz ustaw punkt przerwania w swoim kodzie, klikając na funkcję nasłuchującą zdarzeń. Zdarza się to w sekcji odpowiedzialnej za dodawanie. Po wprowadzeniu wartości w pola wprowadzania i naciśnięciu przycisku, powinieneś wejść w tryb debugowania.
W widoku debuggera możesz inspirować zmienne. W szczególności ważne jest sprawdzenie tekstu wewnętrznego oraz wartości pól wprowadzania, aby zobaczyć przekazywane wartości. Zauważysz, że wartość pól wprowadzających jest typem String, a nie Number, jak oczekiwałeś.
Ten konflikt typów powoduje, że dodawanie nie działa poprawnie. Zamiast dodawać liczby, łączą się one. Przykładem może być wprowadzenie „1” i „6”, które daje wynik „16”, co nie jest oczekiwanym wynikiem. Ten błąd logiczny jest łatwy do zidentyfikowania, ale ważne jest jego rozpoznanie.
Teraz powinieneś naprawić błąd. Wróć do pliku TypeScript w Visual Studio Code i zmień sposób przetwarzania wartości. Zamiast n1.value + n2.value, powinieneś użyć n1.valueAsNumber + n2.valueAsNumber, aby upewnić się, że są to liczby, a nie ciągi znaków.
Po wprowadzeniu zmian, zapisz plik i załaduj stronę ponownie w Chrome. Następnie sprawdź wartości w polach wprowadzania, zanim wykonasz dodawanie. Tym razem poprawny wynik dodawania dwóch liczb zostanie wyświetlony.
Jeśli wszystko zostało wykonane poprawnie, po naciśnięciu przycisku suma zostanie wyświetlona jako „10”, jeśli na przykład wpiszesz wartości „2” i „8”. Dzięki temu skutecznie naprawiłeś błąd i nauczyłeś się, jak ważna jest typizacja w TypeScript.
Dodatkowo, korzystając z TypeScript, możesz jasno określić typy zmiennych. To znacznie redukuje możliwość błędów czasu wykonania. Zawsze pamiętaj, aby podawać typy zmienne, co ułatwi proces debugowania.
Ostatecznie zobaczyłeś, jak ważne są narzędzia deweloperskie Chrome do analizy kodu i zachowania aplikacji w czasie rzeczywistym. Debugowanie za pomocą tych narzędzi może znacząco przyczynić się do poprawy procesów deweloperskich.
Podsumowanie
W tym przewodniku nauczyłeś się, jak debugować prostą aplikację TypeScript. Szczególny nacisk położono na korzystanie z narzędzi deweloperskich Chrome z uwzględnieniem typów w TypeScript. Ostatecznie zdałeś sobie sprawę, jak ważne jest wcześniejsze wykrywanie błędów i jak istotna może być weryfikacja typów w TypeScript.
Najczęstsze pytania
Jaki główny błąd został znaleziony w aplikacji TypeScript?Głównym błędem było używanie wartości typu String zamiast liczb, co prowadziło do błędnych obliczeń.
Jaką rolę pełnią narzędzia deweloperskie Chrome podczas debugowania?Narzędzia deweloperskie Chrome pomagają w analizie kodu w czasie rzeczywistym i identyfikacji błędów w toku programu.
Jak uniknąć błędów w TypeScript?Poprzez definiowanie typów w TypeScript można zmniejszyć błędy czasu wykonania i upewnić się, że używane są tylko właściwe typy danych.
