Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - TEST WIEDZY NR 1



PYTANIE NR 37.
function validateInput(input) {
  if (input === "") {
    console.error("Input cannot be empty");
    return false;
  }
  return true;
}
Zidentyfikuj, które z poniższych narzędzi debuggera w przeglądarce internetowej najskuteczniej pomogą Ci w śledzeniu działania powyższego kodu.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Breakpoints pozwalają zatrzymać wykonanie funkcji w wybranej linii i krokowo prześledzić warunek input === "" oraz wartości zmiennych. Dzięki temu widać, czy kod wchodzi do bloku if i dlaczego zwraca false lub true. DOM, Network i Performance nie pokazują przebiegu instrukcji.

Pełne wyjaśnienie:

W tym fragmencie JavaScript kluczowe jest zrozumienie przepływu wykonania: funkcja sprawdza, czy input jest pustym ciągiem, a następnie w zależności od warunku wypisuje błąd i zwraca false albo zwraca true.

Narzędzie "Breakpoints" (punkty przerwania) jest najbardziej użyteczne do śledzenia działania kodu linia po linii. Pozwala ono:

  • zatrzymać program dokładnie na instrukcji if lub na return,
  • wykonać kod krokowo (np. przejść do następnej linii),
  • podejrzeć bieżące wartości (np. czy input faktycznie jest pusty),
  • sprawdzić, czy wykonywana jest gałąź z console.error,
  • zobaczyć, jaka wartość jest zwracana i w jakim miejscu.

Odpowiedź "DOM Inspector" dotyczy przede wszystkim struktury dokumentu HTML i stylów. Jest świetny do sprawdzania elementów, klas, atrybutów i reguł CSS, ale nie służy do krokowego wykonywania funkcji JavaScript i kontrolowania momentu wejścia w instrukcje warunkowe.

"Network Monitor" służy do analizy komunikacji sieciowej: żądań HTTP, odpowiedzi, nagłówków, czasu pobierania zasobów czy błędów połączeń. W przedstawionym kodzie nie ma wywołań sieciowych, więc to narzędzie nie pomoże w prześledzeniu, dlaczego funkcja zwraca false lub true.

"Performance Monitor" koncentruje się na wydajności: obciążeniu CPU, czasie renderowania, klatkach animacji czy kosztach wykonywania. Może być przydatny, gdy kod spowalnia aplikację, ale nie jest najwygodniejszym narzędziem do zrozumienia logiki warunku i sprawdzenia konkretnych wartości w danym kroku.

W praktyce: ustaw breakpoint na linii z warunkiem, uruchom scenariusz (np. wysłanie formularza), a następnie krokowo sprawdź, co ma zmienna input i czy porównanie do pustego ciągu jest spełnione.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to są breakpoints w debuggerze przeglądarki?
Punkty przerwania (breakpoints) zatrzymują wykonanie skryptu w wybranym miejscu. Dzięki temu możesz sprawdzić wartości zmiennych, przejść krokowo przez instrukcje i zobaczyć, dlaczego dana gałąź warunku została wykonana.
Jak ustawić punkt przerwania w kodzie JavaScript w DevTools?
Otwórz DevTools, przejdź do zakładki Sources/Debugger, znajdź plik ze skryptem i kliknij numer linii. Gdy aplikacja dojdzie do tej linii, wykonanie zatrzyma się i będziesz mógł analizować stan programu.
Dlaczego breakpoints są lepsze niż same console.log do debugowania?
Logi pokazują tylko to, co wcześniej zaplanujesz i wypiszesz. Breakpoints pozwalają zatrzymać program w dowolnym momencie, podejrzeć pełny kontekst (zmienne, stos wywołań) i krokowo przejść przez kod bez dodawania wielu instrukcji logowania.
Jak krokowo przechodzi się przez kod po zatrzymaniu na breakpoint?
Po zatrzymaniu używa się opcji typu "step over/into/out" (krok po kroku). Pozwala to przechodzić do kolejnych linii, wejść do wywoływanej funkcji lub z niej wyjść, obserwując jednocześnie zmiany wartości zmiennych.
Co sprawdzać w debuggerze, gdy funkcja zwraca false zamiast true?
Najpierw sprawdź warunek (np. czy wejście faktycznie jest puste), wartości zmiennych i miejsce wykonania (czy program wchodzi do bloku if). Pomaga też podgląd stosu wywołań, aby zobaczyć, skąd funkcja została uruchomiona.
Czy DOM Inspector nadaje się do śledzenia działania funkcji JavaScript?
Inspektor DOM służy głównie do analizy HTML/CSS i atrybutów elementów. Może pomóc sprawdzić, jaki element dostarcza dane do funkcji, ale nie zastąpi debuggera do krokowego wykonania instrukcji i zatrzymywania kodu na wybranej linii.
Kiedy używa się zakładki Network zamiast breakpoints?
Network jest właściwy, gdy problem dotyczy komunikacji z serwerem: błędnych odpowiedzi API, statusów HTTP, czasu ładowania zasobów lub nagłówków. Do logiki warunków i zwracanych wartości w funkcji JavaScript lepiej użyć punktów przerwania.
Jakie są typowe błędy przy porównaniu input === "" w walidacji?
Częsty błąd to nieuwzględnienie spacji (np. " ") albo wartości null/undefined. W praktyce stosuje się też przycinanie tekstu (trim) i dodatkowe warunki. Debugger pozwala szybko zobaczyć, jaką wartość rzeczywiście ma zmienna w danym kroku.
Gdzie w DevTools widać wartości zmiennych podczas debugowania?
Po zatrzymaniu na punkcie przerwania wartości widać w panelach takich jak Scope/Local/Watch (nazwy zależą od przeglądarki). Możesz też dodać wyrażenia do obserwacji, aby na bieżąco śledzić, jak zmienia się np. input.
Jak przygotować się do egzaminu INF.3 z debugowania w przeglądarce?
Ćwicz na krótkich skryptach: ustawianie breakpointów, krokowanie, podgląd zmiennych i stosu wywołań. Warto też umieć rozróżnić, do czego służą zakładki DevTools: Sources (debugger), Console (logi), Elements (DOM), Network (żądania), Performance (profilowanie).
info

Około 75% zdających odpowiada poprawnie na to pytanie. średnio łatwe

Specjaliści zwracają uwagę: "Breakpoints pozwalają zatrzymać wykonanie funkcji w wybranej linii i krokowo prześledzić warunek input === "" oraz wartości zmiennych."

Źródła:

  • Google Chrome Developers – DevTools: JavaScript debugging (Breakpoints), https://developer.chrome.com/docs/devtools/javascript/ - accessed 2026-02-27
  • MDN Web Docs – Debugging JavaScript, https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript - accessed 2026-02-27
  • Microsoft Learn – Debug JavaScript in the browser (DevTools), https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/javascript/ - accessed 2026-02-27

Materiały:

  • Dokumentacja przeglądarkowych narzędzi deweloperskich (DevTools) dla debugowania JavaScript
  • Materiały o debugowaniu krokowym i punktach przerwania w JavaScript
  • Ćwiczenia praktyczne: ustawianie breakpointów, step over/into/out, obserwacja zmiennych i stosu wywołań
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego