Narzędzia do debugowania są kluczowe do analizy kodu i identyfikacji błędów. Narzędzia deweloperskie Chrome oferują wiele funkcji, które pomogą Ci monitorować i zrozumieć żądania sieciowe oraz sposób komunikacji Twojej aplikacji z serwerem. W tym przewodniku skupimy się na punktach przerwania Fetch, dzięki którym możesz zatrzymać kod po wystąpieniu żądania sieciowego. To pozwala uzyskać głębsze zrozumienie działania Twojej aplikacji i szybkie rozwiązanie ewentualnych problemów.
Najważniejsze informacje
- Punkty przerwania Fetch pozwalają zatrzymać kod przy każdym żądaniu sieciowym.
- Możesz podać konkretne adresy URL, aby ścisłe kontrolować zachowanie.
- W obszarze Sieć narzędzi deweloperskich możesz śledzić, jakie żądania zostały wykonane i przez kogo zostały wywołane.
Instrukcja krok po kroku
1. Dostęp do narzędzi deweloperskich
Aby móc pracować z punktami przerwania Fetch, musisz najpierw otworzyć narzędzia deweloperskie Chrome. Możesz to zrobić, klikając w prawym górnym rogu Chrome na trzy kropki, następnie przechodząc do "Więcej narzędzi" i ostatecznie do "Narzędzia deweloperskie". Alternatywnie, możesz również użyć skrótu klawiszowego Ctrl + Shift + I w systemie Windows lub Cmd + Option + I na Macu.
2. Nawigacja do sekcji Źródeł
W narzędziach deweloperskich znajdziesz karty „Elementy”, „Konsola”, „Źródła”, „Sieć” i wiele innych. Teraz musisz kliknąć na kartę „Źródła”, aby uzyskać dostęp do źródeł swojego projektu. Tutaj możesz przeglądać swój kod JavaScript i ustawiać punkty przerwania.
3. Ustawienie punktu przerwania Fetch
W zakładce „Źródła” znajduje się sekcja „XHR” lub „Punkty przerwania Fetch”. Aby ustawić punkt przerwania Fetch, kliknij odpowiedni przycisk, aby dodać nowy punkt przerwania. Zostaniesz poproszony o wprowadzenie adresu URL lub jego części, aby spersonalizować punkt przerwania. Jeśli jednak nic nie wpiszesz, punkt przerwania aktywuje się dla wszystkich żądań Fetch, które zostaną wykonane.
4. Aktywowanie punktu przerwania
Aby sprawdzić, czy punkt przerwania Fetch został poprawnie ustawiony, wykonaj działanie, które wywołuje żądanie Fetch – na przykład klikając przycisk, który wykonuje zapytanie o dane. Jeśli punkt przerwania działa poprawnie, kod zatrzyma się w tym miejscu i wskaże aktualny stan kodu.
5. Sprawdzanie żądania sieciowego
Gdy kod się zatrzyma, masz możliwość sprawdzenia bieżącego stanu zmiennych i analizy żądania sieciowego. Tutaj możesz upewnić się, że odbierane są oczekiwane dane. Na przykład jeśli obserwujesz zmienną w swoim kodzie, która wykonuje żądanie Fetch, możesz zobaczyć, czy odwołuje się do właściwego punktu końcowego.
6. Konfigurowanie specyficznych punktów przerwania
Jeśli interesują Cię tylko określone żądania Fetch, możesz dodać nowy punkt przerwania i podać specyficzną adres URL. Na przykład możesz ustawić URL na „main.js”. Następnie, gdy wykonasz żądanie Fetch dla tego adresu URL, punkt przerwania powinien zostać aktywowany. Jeśli nie podasz adresu URL, punkt przerwania będzie dotyczył wszystkich żądań sieciowych, co jest przydatne do badania problemów ogólnych.
7. Sprawdzanie inicjatora
Aby dowiedzieć się więcej o przyczynach żądania Fetch, możesz przejść do karty „Sieć” narzędzi deweloperskich. Tam zobaczysz listę wszystkich wykonanych żądań Fetch. Kolumna „Inicjator” pokaże Ci, który fragment Twojego kodu spowodował żądanie. Po kliknięciu na jeden z tych wpisów, zostaniesz przeniesiony do odpowiedniego wiersza w zakładce „Źródła”.
8. Ostatnie kontrole
Jeśli dokonujesz zmian w kodzie, na przykład zmiany w adresie URL, upewnij się, że ponownie załadowujesz narzędzia deweloperskie, aby uwzględnić zmiany. Możesz to zrobić bardzo łatwo, odświeżając stronę. Następnie sprawdź, czy żądanie Fetch ponownie działa poprawnie i czy punkt przerwania jest aktywowany zgodnie z oczekiwaniami.
Podsumowanie
W tym poradniku nauczyłeś się, jak korzystać z punktów przerwania Fetch w narzędziach deweloperskich Chrome, aby zatrzymać kod podczas żądań sieciowych. Dowiedziałeś się, jak ustawić konkretne punkty przerwania, aby zatrzymać tylko w określonych miejscach kodu, jakie informacje możesz odczytać z narzędzi dla deweloperów oraz jak śledzić, kto wywołał żądanie Fetch.
Najczęściej zadawane pytania
Jakie są punkty przerwania Fetch?Punkty przerwania Fetch pozwalają zatrzymać kod w określonym miejscu, gdy żądanie Fetch zostaje wysłane do serwera.
Jak ustawić punkt przerwania Fetch?Możesz ustawić punkt przerwania Fetch w zakładce „Źródła” narzędzi deweloperskich Chrome, wpisując adres URL lub ogólny ustawienie dla wszystkich żądań Fetch.
Jak sprawdzić, czy mój punkt przerwania Fetch działa?Możesz to przetestować, wykonując akcję, która wywoła żądanie Fetch. Debuger powinien zatrzymać się, gdy punkt przerwania jest aktywny.
Co zrobić, gdy punkty przerwania nie zostaną aktywowane?Upewnij się, że adres URL jest poprawnie wpisany i że kod wykonujący żądanie Fetch faktycznie został osiągnięty. Ponowne załadowanie strony może również pomóc.
W jaki sposób mogę zobaczyć inicjatora żądania Fetch?Możesz zobaczyć inicjatora w zakładce „Sieć” narzędzi deweloperskich. Tam zostanie pokazane, jaki fragment twojego kodu inicjował żądanie.
