Zbadaj Element – Poradnik

Funkcja do robienia sobie żartów, czy może całkiem potężne narzędzie dla developerów? “Zbadaj element” radzi sobie doskonale zarówno jako to pierwsze, jak i to drugie.

W tym poradniku opiszę kilka jego funkcji i zaprezentuję, jak można go używać w praktyce.

Do czego służy Zbadaj Element?

Opcja “zbadaj element” pozwala nam na uruchomienie tzw. devtoolsów w przeglądarce. Devtoolsy to po prostu zbiór narzędzi developerskich, w których skład wchodzi między innymi inspektor kodu strony, sieci, pamięci, czy też (w przeglądarkach opartych o Chrome) Lighthouse, który pozwala nam zebrać wiele danych na temat wydajności i dostępności danej strony internetowej. Oprócz tego devtoolsy pozwalają między innymi sprawdzić responsywność strony internetowej, czy też uruchomić konsolę, która jest bardzo przydatnym narzędziem, między innymi dla programistów JavaScript.

Dzięki opcji Zbadaj Element możemy między innymi:

• Łatwo odnaleźć selektor jakiegoś elementu na stronie, dzięki czemu będziemy mogli łatwo zmienić jego style CSS.
• Szybko i dynamicznie zmieniać treść czy wygląd elementów strony internetowej.
• Usuwać lub dodawać elementy na stronie internetowej.
• Debugować kod, poprawiać niedziałające elementy i łatwiej znajdować błędy.
• Wygodnie odczytywać widoczny dla użytkownika kod stron internetowych. Dzięki temu możecie na przykład łatwo sprawdzić, jak zakodowany jest dany element danej strony, jaki ma padding, czcionkę, czy chociażby kolor.

Zmiany w “zbadaj element” nie powinny też mieć żadnego realnego wpływu na zmianę rzeczywistego zachowania strony. Nawet jeżeli za pomocą “zbadaj element” zmienicie np. cenę jakiegoś produktu w sklepie internetowym, nie oznacza to, że będziecie mogli go po takiej kupić. Tego rodzaju elementy zapisywane i walidowane są z reguły po stronie backendu, czyli kodu wykonywanego po stronie serwera, do którego zwykły użytkownik nie ma dostępu.

Opcja “zbadaj element” nie powinna służyć do tego rodzaju pseudocwaniactwa. To narzędzie do realnych, developerskich potrzeb. Dobrze wykorzystane potrafi ułatwić pracę niemal każdego programisty, który zajmuje się tworzeniem lub rozwijaniem stron internetowych. Jeżeli masz choć trochę do czynienia z takimi rzeczami, zdecydowanie polecam Ci zaznajomić się z możliwościami, które oferują nam devtoolsy.

Jak włączyć Zbadaj Element w różnych przeglądarkach

W tym celu naciśnij prawym przyciskiem myszy na element strony internetowej, który chcesz zbadać.

Wybierz opcję:

• Zbadaj (Chrome)
• Zbadaj element (Firefox, Opera)
• Wykonaj inspekcję (Microsoft Edge)

Nawet jeśli nie wiecie, jaki dokładnie element chcecie “zbadać”, możecie wybrać tę opcję dowolnym miejscu. Powinien wyświetlić się Wam kod całej witryny, więc w razie potrzeby możecie znaleźć dany obszar właśnie w nim. Warto tutaj wspomnieć o możliwości użycia wyszukiwarki CTRL + F.

Skrót klawiszowy do Zbadaj element

Osobiście korzystam z devtoolsów jakieś kilkadziesiąt razy dziennie. Nie zawsze moją intencją jest badanie konkretnego elementu, a w takich sytuacjach nieco prościej jest użyć skrótu klawiszowego.

W większości nowoczesnych przeglądarek narzędzia developerskie można otworzyć za pomocą skrótu klawiszowego CTRL + SHIFT + I lub przycisku F12.

Jak zmienić jakąś treść dzięki Zbadaj element

1. Wybierz konkretny element na stronie internetowej i naciśnij na nim “Zbadaj element”.

2. Odnajdź fragment kodu, który chcesz zmienić. Naciśnij na niego dwa razy lewym przyciskiem myszy.

3. Wprowadź nowy tekst i naciśnij ENTER. Możesz też użyć kodu HTML.

Jak zmienić styl strony w zbadaj element

Dzięki opcji zbadaj element, powinniście mieć także dostęp do zakładki “Styles”. Możecie zmieniać w niej dowolne style CSS i na żywo mieć podgląd na dokonywane zmiany.

1. Naciśnij prawym przyciskiem na element, który chcesz zmienić.

2. Odnajdź odpowiedni selektor i naciśnij na wnętrze jego stylów CSS. Zmień konkretną wartość lub dopisz tam swoją własną. Wystarczą dwa kliknięcia i zatwierdzenie zmian przyciskiem ENTER.

Jak zbadać element na systemie macOS?

Zasady są podobne do tych, które dotyczą innych systemów operacyjnych. Wszystko zależy przede wszystkim od używanej przez Was przeglądarki.

Jeżeli używacie jednak Safari, wejdźcie w Ustawienia i wybierzcie zakładkę “Zaawansowane” tam z kolei zaznaczcie checkbox związany z pokazywaniem menu developerskiego w pasku menu.

Gdy to zrobicie, po naciśnięciu prawego przycisku myszy powinniście mieć dostępny przycisk “Zbadaj Element”, a w górnym menu powinna pojawić się także opcja dedykowana developerom.

Jak zbadać element na telefonie?

Jeżeli chcecie po prostu odczytać kod danej witryny, najprościej zobaczyć jego źródło, w tym celu przed adresem strony dopiszcie: view-source: tworząc z tego adres jak na przykład: view-source:https://webporady.pl/.

W sytuacji, w której chcecie coś zmieniać, najwygodniej byłoby robić to na komputerze. Jeżeli nawet chcecie zobaczyć, jak dany element zachowuje się na urządzeniu mobilnym, narzędzia developerskie pozwalają zmienić rozdzielczość i wyświetlać stronę tak, jak wyświetlałaby się na telefonie.

Jeżeli bardzo Wam zależy na używaniu tej funkcji na telefonie, możecie na przykład pobrać jedną z aplikacji pozwalających na uruchomienie edytora stron. Znajdziecie ich całkiem sporo pod frazami takimi jak na przykład “Web Inspector”.