Aby zbadać element, kliknij go prawym przyciskiem myszy i wybierz opcję „Zbadaj” w przeglądarce Chrome, Firefox lub Edge. W Safari najpierw włącz funkcje dla programistów stron internetowych, a następnie kliknij prawym przyciskiem myszy lub z wciśniętym klawiszem Control i wybierz opcję „Zbadaj element” . Przeglądarka otworzy narzędzia i zaznaczy element w drzewie dokumentu dynamicznego. W przeglądarkach Chrome i Edge panel nazywa się „Elements ” , w Firefoksie „Inspector” , a w Safari „Web Inspector” .
Możesz też skorzystać z menu z trzema kropkami w Chrome: Więcej narzędzi > Narzędzia dla programistów . Skróty: F12 lub Ctrl+Shift+I (Windows/Linux) i Command+Option+I (Mac). Naciśnij Ctrl+Shift+C lub Command+Shift+C , aby otworzyć Elementy w trybie wybierania stron.
Możesz też wybrać Ustawienia i więcej (…) > Więcej narzędzi > Narzędzia programistyczne . Naciśnij klawisz F12 lub Ctrl+Shift+I (Windows/Linux) i Command+Option+I (Mac), aby ponownie otworzyć ostatni panel Narzędzi programistycznych. Skróty klawiszowe mogą się różnić.
Otwórz Narzędzia programistyczne za pomocą klawisza F12 lub Ctrl+Shift+I (Windows/Linux) lub Command+Option+I (Mac). Ctrl+Shift+C lub Command+Option+C otwiera Inspektora. Jeśli strona zastępuje menu prawego przycisku myszy, użyj skrótu lub menu Firefoksa.
Web Inspector zaznacza kliknięty element. Możesz również wybrać kolejno opcje Programowanie > Pokaż Web Inspector lub nacisnąć Option+Command+I , aby otworzyć go dla bieżącej strony. Poniższe kroki dotyczą przeglądarki Safari na komputerze Mac.
Podświetlony wiersz to węzeł w aktywnym drzewie DOM. Rozwiń jego strzałkę, aby wyświetlić zagnieżdżone elementy, lub kliknij ikonę selektora elementów, najedź kursorem na stronę i wybierz element docelowy. Selektor pomaga w przypadku małych lub nakładających się elementów.
Użyj panelu Style (nazywanego Regułami w Firefoksie), aby sprawdzić, które deklaracje CSS mają zastosowanie i skąd pochodzą. Odznacz deklarację lub edytuj wartość, aby wyświetlić podgląd zmian układu, koloru, odstępów lub typografii. Nie powoduje to nadpisania plików witryny ani zmiany tego, co widzą inni użytkownicy.
Każda przeglądarka ma kontrolkę responsywności lub podglądu urządzenia. Wybierz lub wprowadź węższy rozmiar okna podglądu, a następnie sprawdź ten sam DOM i style. Może to ujawnić problemy z punktami przerwania i układem, ale nie zastępuje testowania na rzeczywistych urządzeniach.
| Przeglądarka | Otwórz narzędzia programistyczne | Zbadaj element strony |
|---|---|---|
| Chrome | F12 lub Ctrl+Shift+I; Mac: Command+Option+I | Ctrl+Shift+C; Mac: Command+Shift+C |
| Firefox | F12 lub Ctrl+Shift+I; Mac: Command+Option+I | Ctrl+Shift+C; Mac: Command+Opcja+C |
| Safari | Opcja+Command+I na komputerze Mac | Kliknij prawym przyciskiem myszy/Control-klik > Zbadaj element |
| Krawędź | F12 lub Ctrl+Shift+I; Mac: Command+Option+I | Użyj ikony selektora w Narzędziach programistycznych |
Skróty mogą się różnić w zależności od systemu operacyjnego, wersji przeglądarki lub ustawień niestandardowych. Jeśli któryś z nich nie działa, należy skorzystać z menu przeglądarki lub polecenia menu kontekstowego.
Zwykłe zmiany w panelach Elementy, Inspektor lub Style to tymczasowe zmiany w przeglądarce. Ponowne załadowanie strony zazwyczaj przywraca wersję dostarczoną przez witrynę. Niektóre procesy programistyczne mogą zapisywać lokalne nadpisania na Twoim komputerze, ale nawet one nie publikują zmian na serwerze witryny. Narzędzia programistyczne należy traktować jako narzędzie do sprawdzania i testowania strony, a nie jako narzędzie do modyfikowania działającej witryny dla wszystkich.
Aktualne informacje można znaleźć w oficjalnym podręczniku Chrome DevTools , w skrótach przeglądarki Firefox , w podręczniku konfiguracji i kontroli przeglądarki Safari firmy Apple oraz w przeglądzie przeglądarki Edge firmy Microsoft .
Dowiedz się, co oznacza metafora „zadania pobocznego” w Internecie, jak wypróbować hobby i społeczności w różnych aplikacjach oraz jak chronić swoją prywatność, czas i granice.
Dowiedz się, kiedy klipy z procesów, dzienniki produkcji i szybkie nagrania mogą wzmacniać zaufanie — i jak uczciwie je porównywać z dopracowanymi materiałami wideo.
Poznaj wygodne i niedrogie sposoby na zwolnienie tempa życia w świecie, w którym wszyscy są zawsze online, ustal łagodniejsze granice cyfrowe i ciesz się codziennymi czynnościami, nie zamieniając spokoju w kolejny projekt zakupowy.
Zobacz, jak TikTok i YouTube pomagają w zakresie samouczków, produktów, podróży i codziennych pytań, a także jak weryfikować daty, sponsorów i ważne oświadczenia.
Odkryj, w jaki sposób twórcy remiksują muzykę, typografię, kolory, modę i tekstury wideo z lat 70. i 80. XX wieku dla amerykańskiej publiczności, mając na uwadze kontekst kulturowy i prawa.
Porównaj Reddit, Substack i Discord pod względem odkrywania, moderacji, tożsamości, kosztów i przenośności dla odbiorców, korzystając z praktycznego przewodnika dla czytelników i twórców.
Kultura chaosu opisuje szybkie, wielowarstwowe i remiksowalne wideo – nie jest to regułą, że każdy widz z Pokolenia Alfa preferuje ten sam styl. Poznaj cechy, ograniczenia badawcze i praktyczną listę kontrolną dla twórców.
Znajdź bezpłatne animowane tapety na Androida z możliwością personalizacji zegarów i paneli stanu, obracających się grafik, zmieniających się scen i efektów fotograficznych Pixel — a także wskazówki dotyczące konfiguracji.
Zablokuj kogoś na TikToku, korzystając z menu Udostępnij, zarządzaj niechcianymi komentującymi, sprawdź listę zablokowanych i dowiedz się, co blokowanie ukrywa, a czego nie.
Porównaj 11 darmowych publicznych serwerów DNS, w tym Cloudflare, Google i Quad9, ze zweryfikowanymi adresami, opcjami filtrowania i wskazówkami dotyczącymi konfiguracji systemu Windows 11.
