Śledzenie wykonywania kodu krok po kroku
Proszę wykonywać kod krokowo: pomijać, wchodzić do funkcji i z nich wychodzić.
Śledzenie wykonywania kodu krok po kroku to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Przechodzenie przez kod
Po wstrzymaniu na punkcie przerwania można przechodzić przez kod, wykonując jedną operację naraz, aby obserwować zmiany stanu w kolejnych wierszach.
Wznawianie
Przycisk wznawiania kontynuuje normalne wykonywanie programu aż do następnego punktu przerwania lub do jego zakończenia. Należy go użyć, gdy sprawdzono już wystarczająco dużo podczas bieżącego wstrzymania.
Przejście ponad wywołaniem
Przejście ponad wywołaniem w pełni wykonuje bieżący wiersz, w tym wywoływaną przez niego funkcję, a następnie wstrzymuje program w następnym wierszu tej samej funkcji. Wywołana funkcja nie jest otwierana.
function helper() {
return 5
}
function main() {
const a = helper()
const b = a + 1
return b
}Wejście do funkcji
Wejście do funkcji otwiera wywołanie funkcji w bieżącym wierszu i wstrzymuje program przy jej pierwszej instrukcji, aby można było debugować jej wnętrze.
function helper() {
const x = 10
return x
}
function main() {
return helper()
}Wyjście z funkcji
Wyjście z funkcji kończy wykonywanie bieżącej funkcji i wstrzymuje program w wierszu znajdującym się bezpośrednio za wywołaniem, które do niej doprowadziło. Należy go użyć, aby opuścić funkcję, której nie trzeba już sprawdzać.
Wybór polecenia przechodzenia
Należy przejść ponad wywołaniem, gdy funkcja jest zaufana, wejść do funkcji, aby ją zbadać, i wyjść z niej po potwierdzeniu, że jej wewnętrzna logika działa poprawnie.
Panel stosu wywołań
Podczas przechodzenia panel stosu wywołań pokazuje łańcuch wywołań funkcji, który doprowadził do bieżącego wiersza. Kliknięcie ramki przenosi do tego kontekstu.
Obserwowanie zmian stanu
Podczas przechodzenia panele Scope i Watch są aktualizowane, dzięki czemu można dokładnie zobaczyć, który wiersz nieoczekiwanie modyfikuje zmienną.
Przechodzenie przez pętle
Wewnątrz pętli przechodzenie powtarza treść pętli w każdej iteracji. Warunkowy punkt przerwania jest często szybszy niż ręczne przechodzenie przez wiele iteracji.
function sumTo(n) {
let total = 0
for (let i = 1; i <= n; i++) {
total += i
}
return total
}Wchodzenie do kodu bibliotek
Wejście do funkcji może przenieść do wewnętrznego kodu biblioteki. DevTools udostępnia funkcję ignorowania wskazanych skryptów, dzięki czemu można pozostać we własnym kodzie.
Typowy przepływ pracy
Należy ustawić punkt przerwania w pobliżu podejrzewanego błędu, a następnie przechodzić przez kod wiersz po wierszu i obserwować zmienne, aż zostanie znalezione miejsce, w którym rzeczywisty stan odbiega od oczekiwanego.
Szybkie sprawdzenie
Sprawdź swoją wiedzę o przechodzeniu przez kod.
Podsumowanie
Podsumowanie: Przechodzenie pozwala kontrolować wykonywanie kolejnych fragmentów kodu.
- Przejście ponad wywołaniem wykonuje wiersz bez wchodzenia do wywoływanych funkcji
- Wejście do funkcji otwiera wywołaną funkcję
- Wyjście z funkcji kończy bieżącą funkcję
- Stos wywołań pokazuje, jak dotarło się do bieżącego miejsca
Często zadawane pytania
Czy lekcja „Śledzenie wykonywania kodu krok po kroku” jest bezpłatna?
Tak — pełny tekst „Śledzenie wykonywania kodu krok po kroku” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Śledzenie wykonywania kodu krok po kroku”?
Proszę wykonywać kod krokowo: pomijać, wchodzić do funkcji i z nich wychodzić. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Śledzenie wykonywania kodu krok po kroku”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?
Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Coś więcej niż console.log
- Ustawianie punktów przerwania
- Śledzenie wykonywania kodu krok po kroku
- Odczytywanie śladów stosu