Ustawianie punktów przerwania
Proszę wstrzymywać wykonywanie kodu i sprawdzać stan.
Ustawianie punktów przerwania to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 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.
Czym jest punkt przerwania
Punkt przerwania nakazuje debuggerowi wstrzymać wykonywanie programu w określonym wierszu. Podczas wstrzymania można sprawdzić zmienne i stos wywołań, aby zrozumieć stan programu.
Dlaczego punkty przerwania są lepsze od logowania
W porównaniu z rozmieszczaniem instrukcji logujących punkty przerwania pozwalają sprawdzić każdą zmienną dostępną w danym miejscu i momencie bez zmieniania kodu. Następnie można wznowić wykonywanie lub przejść dalej krok po kroku.
Otwieranie panelu Sources
W przeglądarkowych narzędziach DevTools punkty przerwania znajdują się w panelu Sources. Należy otworzyć DevTools, przejść do Sources i znaleźć plik skryptu w drzewie plików.
Ustawianie punktu przerwania wiersza
Aby ustawić punkt przerwania, należy kliknąć obszar z numerami wierszy obok instrukcji. Pojawi się znacznik, a wykonywanie zostanie wstrzymane tuż przed uruchomieniem tego wiersza.
Instrukcja debugger
Dodanie instrukcji debugger w kodzie programowo wywołuje punkt przerwania, gdy DevTools jest otwarte. Należy ją usunąć przed wdrożeniem kodu produkcyjnego.
function compute(x) {
const doubled = x * 2
// a debugger statement on the next line would pause execution here
return doubled + 1
}Warunkowe punkty przerwania
Kliknięcie wiersza prawym przyciskiem myszy umożliwia dodanie warunku. Debugger wstrzyma wykonywanie tylko wtedy, gdy wyrażenie będzie miało wartość true, co jest niezwykle przydatne wewnątrz pętli.
Punkty logowania
Punkt logowania wypisuje komunikat bez wstrzymywania wykonywania programu. Działa jak tymczasowa instrukcja logująca dodana za pośrednictwem DevTools zamiast przez edycję kodu źródłowego.
Sprawdzanie zmiennych
Podczas wstrzymania panel Scope wyświetla zmienne lokalne, zamknięcia i globalne wraz z ich bieżącymi wartościami, dzięki czemu można zweryfikować swoje założenia.
Wyrażenia do obserwowania
Panel Watch oblicza zdefiniowane wyrażenia przy każdym wstrzymaniu, umożliwiając monitorowanie obliczonej wartości podczas przechodzenia przez kod.
Punkty przerwania na zdarzeniach
DevTools może także wstrzymywać wykonywanie na zdarzeniach, takich jak kliknięcie lub żądanie sieciowe, dokładnie w chwili wystąpienia danego zdarzenia.
Zarządzanie punktami przerwania
Panel Breakpoints zawiera listę wszystkich punktów przerwania. Można je tymczasowo wyłączyć za pomocą pola wyboru albo usunąć po zakończeniu debugowania.
Szybkie sprawdzenie
Sprawdź swoją wiedzę o punktach przerwania.
Podsumowanie
Podsumowanie: Punkty przerwania wstrzymują wykonywanie programu w celu jego sprawdzenia.
- Ustawia się je w obszarze z numerami wierszy panelu Sources
- Instrukcja debugger wstrzymuje programowo wykonywanie programu
- Warunkowe punkty przerwania wstrzymują wykonywanie tylko wtedy, gdy warunek jest spełniony
- Podczas wstrzymania można sprawdzać zakresy i obserwowane wyrażenia
Często zadawane pytania
Czy lekcja „Ustawianie punktów przerwania” jest bezpłatna?
Tak — pełny tekst „Ustawianie punktów przerwania” 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 „Ustawianie punktów przerwania”?
Proszę wstrzymywać wykonywanie kodu i sprawdzać stan. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Ustawianie punktów przerwania”?
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