KWALIFIKACJA PGF4 - STYCZEŃ 2020

PYTANIE NR 36.
W celu uzyskania widoku przedstawionego na ilustracji należy wybrać w przeglądarkach internetowych Mozilla Firefox lub Google Chrome polecenie
Ilustracja przedstawia zrzut ekranu z przeglądarki internetowej, prawdopodobnie Mozilla Firefox, z otwartym narzędziem
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Polecenie "zbadaj element" (często też "zbadaj") uruchamia inspektor w narzędziach deweloperskich i pozwala podejrzeć strukturę oraz właściwości wskazanego elementu strony.
Pozostałe opcje dotyczą pobierania plików, edycji lub wyszukiwania tekstu na stronie, więc nie dają widoku związanego z analizą elementu.

Pełne wyjaśnienie:

Polecenie "zbadaj element" (czasem skrócone do "zbadaj") w przeglądarkach takich jak Mozilla Firefox i Google Chrome służy do uruchomienia narzędzi deweloperskich w trybie wskazania konkretnego elementu strony. Efektem jest widok inspektora (zwykle panel Elements/Inspector), w którym można zobaczyć strukturę dokumentu (HTML/DOM), a często także powiązane style (CSS) oraz bieżące atrybuty elementu.

Dlaczego ta odpowiedź pasuje do opisu? Widok inspektora jest charakterystyczny: pokazuje drzewo elementów, podświetlenie wybranego fragmentu strony i narzędzia do analizy układu. To właśnie ten rodzaj ekranu jest typowo prezentowany na ilustracjach w zadaniach dotyczących pracy z zawartością WWW.

Dlaczego pozostałe propozycje nie pasują?

  • "pobrane pliki" odnosi się do listy pobrań (menedżera pobierania). Taki widok nie dotyczy analizy kodu strony ani inspekcji elementów.
  • "edycja" lub "edytuj" w przeglądarce zwykle dotyczy operacji na tekście (kopiuj/wklej) lub ustawień, a nie panelu inspektora elementów.
  • "znajdź na tej stronie" uruchamia wyszukiwanie tekstu na bieżącej stronie (funkcja typu Ctrl+F). To wyszukiwarka treści, nie narzędzie do podejrzenia struktury HTML.

W praktyce umiejętność korzystania z inspektora pomaga także w pracy technika fotografii i multimediów: przy publikacji portfolio, sprawdzaniu osadzania galerii, weryfikacji ścieżek do plików graficznych czy diagnozowaniu problemów z responsywnością. Trzeba jednak pamiętać, że nazwy pozycji menu mogą się różnić w zależności od wersji przeglądarki i języka interfejsu, co bywa źródłem pomyłek na testach.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
To polecenie uruchamia inspektor w narzędziach deweloperskich i wskazuje konkretny element strony. Dzięki temu możesz zobaczyć jego miejsce w strukturze HTML/DOM oraz powiązane style (CSS), co ułatwia diagnozę problemów z wyświetlaniem.
Najczęściej używa się menu kontekstowego: klik prawym przyciskiem na element strony i wybierz opcję typu "Zbadaj". Alternatywnie można otworzyć całe DevTools z menu przeglądarki i przejść do panelu elementów.
W Firefox działa podobnie: klik prawym przyciskiem na obiekt na stronie i wybierz opcję typu "Zbadaj element". Otworzy się inspektor z drzewem DOM oraz narzędziami do analizy układu i stylów.
Inspektor to podstawowe narzędzie do szybkiego sprawdzania, jak zbudowana jest strona i dlaczego coś wygląda inaczej niż oczekiwano. Na egzaminach testuje praktyczną orientację w środowisku pracy z treściami WWW.
Nie. "Znajdź na tej stronie" (wyszukiwanie jak Ctrl+F) szuka tekstu w treści strony. "Zbadaj element" uruchamia narzędzia deweloperskie i pokazuje strukturę HTML/DOM oraz parametry elementu.
Można podejrzeć tagi i atrybuty HTML, hierarchię DOM, klasy i identyfikatory, a także powiązane reguły CSS. Często da się też zobaczyć wymiary, marginesy, siatkę układu oraz podświetlenie elementu na stronie.
Najczęściej mylą inspektor z listą pobrań albo z wyszukiwaniem na stronie, bo te funkcje są częściej używane. Drugi typ błędu to nieuważne rozpoznanie etykiety w menu, gdy tłumaczenie lub wersja przeglądarki różni się od tej znanej z ćwiczeń.
Przydaje się np. podczas publikowania portfolio, osadzania galerii, sprawdzania dlaczego obraz się nie wczytuje (błędna ścieżka), albo gdy elementy interfejsu "rozjeżdżają się" na różnych ekranach. Inspektor pomaga szybko znaleźć przyczynę.
Zwykle widać panel z drzewem elementów (zagnieżdżone znaczniki) oraz podświetlenie fragmentu strony. Często obok jest sekcja stylów (CSS) i informacji o układzie. To odróżnia inspektor od konsoli czy listy pobrań.
Tak. Etykiety zależą od wersji przeglądarki i języka interfejsu. Sens funkcji pozostaje ten sam: otwarcie narzędzi deweloperskich i wskazanie elementu. Na egzaminie warto kojarzyć zarówno pełną nazwę, jak i skrót.
info

Statystycznie 67% uczniów zna prawidłową odpowiedź. średnie

Źródła:

  • Mozilla Support (SUMO) – "What are the developer tools?" https://support.mozilla.org/en-US/kb/what-are-developer-tools (dostęp: 2026-03-02)
  • Google Developers – Chrome DevTools: "Open Chrome DevTools" https://developer.chrome.com/docs/devtools/open/ (dostęp: 2026-03-02)
  • Google Developers – Chrome DevTools: "Inspect and edit pages and styles" (panel Elements) https://developer.chrome.com/docs/devtools/dom/ (dostęp: 2026-03-02)

Materiały:

  • Dokumentacja pomocy Mozilla dotycząca narzędzi deweloperskich/inspektora
  • Dokumentacja Chrome DevTools (Inspekcja elementów, panel Elements)
  • Ćwiczenia praktyczne: klik prawym przyciskiem na element strony i uruchamianie inspektora w różnych wersjach językowych przeglądarki

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego