Większość ludzi nie zdaje sobie sprawy, że do ich dyspozycji jest skarbnica narzędzi programistycznych, ukryta w ich ulubionej przeglądarce.
Każda przeglądarka internetowa oferuje narzędzia programistyczne do sprawdzenia kodowania strony internetowej, jednak dla przeciętnego internauty jest to podmiot obcy. W końcu kto chce patrzeć na kodowanie strony internetowej, prawda?
Jak się okazuje, jest mnóstwo rzeczy, których można się nauczyć, przeglądając kod strony internetowej. Czytaj dalej, aby dowiedzieć się, co oferuje funkcja inspekcji elementu i jak z niego korzystać.
Jak korzystać z inspekcji elementu w określonej przeglądarce
Większość przeglądarek ma narzędzia do sprawdzania elementów witryny, ale generalnie wszystkie działają w ten sam sposób.
Korzystanie z Inspect Element w Google Chrome
- Otwórz stronę, którą chcesz sprawdzić.
- Kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz Sprawdzać.
LUB
- Kliknij trzy pionowe kropki w prawym rogu paska narzędzi.
- Iść do Więcej narzędzi.
- Wybierać Narzędzia deweloperskie.
LUB
- wciśnij F12 klawisz skrótu klawiszowego na PC lub CMD + Opcje + I na Macu.
Korzystanie z Inspect Element w Microsoft Edge
- Otwórz stronę internetową.
- Kliknij trzy pionowe kropki w prawym górnym rogu paska narzędzi przeglądarki.
- Przewiń w dół i kliknij Więcej narzędzi.
- Kliknij Narzędzia deweloperskie.
LUB
- Kliknij prawym przyciskiem myszy w dowolnym miejscu witryny.
- Kliknij Sprawdzać.
LUB
- naciskać Ctrl + Shift + I.
Każda z tych trzech metod da ci ten sam wynik.
Jeśli zrobiłeś to poprawnie, zobaczysz nowe okienko otwarte na dole przeglądarki. Są to narzędzia programistyczne i zawierają kartę Elementy. To jest narzędzie, którego potrzebujesz do inspekcji elementu.
Panel otworzy się domyślnie u dołu ekranu, ale zawsze możesz zmienić jego wygląd. Wykonaj te proste czynności, aby zmienić położenie panelu Narzędzia dla programistów:
- Kliknij trzy pionowe kropki w górnym rogu panelu Narzędzia dla programistów.
- Wybierz stronę dokowania (lewą, dolną lub prawą) lub oddokuj do osobnego okna.
Umieszczenie kursora obok krawędzi ramki panelu Narzędzia programisty i przeciąganie spowoduje zawężenie lub poszerzenie obszaru roboczego. Na przykład, jeśli zdecydujesz się zadokować panel po prawej stronie okna przeglądarki, spróbuj najechać kursorem na lewą krawędź. Możesz przeciągnąć panel, aby zmienić jego rozmiar, gdy zobaczysz kursor strzałki.
Korzystanie z elementu inspekcji (specyficzne dla systemu operacyjnego)
Chociaż wiele z zaangażowanych kroków mogło zostać omówionych po prostu pokazując, jak używać Inspect Element w przeglądarce, gdzie on istnieje w pierwszej kolejności, ale i tak pokażemy ci, jak to zrobić w większości systemów operacyjnych.
Jak korzystać z Inspect Element na Chromebooku
Domyślną przeglądarką na Chromebooku jest Google, więc postępuj zgodnie z instrukcjami przeglądarki Chrome, aby uzyskać dostęp Sprawdź element. Oto mały kurs przypominający dla Ciebie:
- Otwórz stronę internetową.
- Kliknij trzy pionowe linie w prawym górnym rogu paska narzędzi.
- Wybierać Więcej narzędzi.
- Kliknij Narzędzia deweloperskie.
Możesz także użyć metody kliknięcia prawym przyciskiem lub F12 klawisz funkcyjny, aby szybciej przejść do Narzędzi dla programistów.
Jak korzystać z Inspect Element na urządzeniu z Androidem
Uruchamianie elementu Inspect na urządzeniu z systemem Android jest nieco inne. Sprawdź, jak dostać się do panelu Sprawdź element w systemie Android:
- wciśnij F12 klawisz funkcyjny.
- Wybierać Przełącz pasek urządzenia.
- Wybierz urządzenie z systemem Android z menu rozwijanego.
Po wybraniu konkretnego urządzenia z Androidem zauważysz, że ładuje się mobilna wersja witryny. Stąd możesz swobodnie korzystać z funkcji Sprawdź element na swoim urządzeniu z Androidem, nie wychodząc z komputera.
Ta metoda działa zarówno w przeglądarkach Chrome, jak i Firefox, ponieważ mają one w swoich narzędziach programistycznych funkcję o nazwie Symulacja urządzenia.
Działa to również w ten sam sposób na urządzeniach iPhone. Wystarczy wybrać właściwy z menu rozwijanego.
Jak korzystać z Inspect Element w systemie Windows
Narzędzie Sprawdź element niekoniecznie jest specyficzne dla systemu operacyjnego, ale jest specyficzne dla przeglądarki. Oznacza to, że Narzędzia programistyczne są funkcją używanej przeglądarki, a niekoniecznie systemu Windows. Możesz jednak przejść do panelu Sprawdź element niezależnie od preferowanej przeglądarki.
Jeśli korzystasz z systemu operacyjnego Windows, prawdopodobnie korzystasz również z przeglądarki Microsoft Edge. Sprawdź, jak uzyskać dostęp do Inspect Element w MS Edge:
- Otwórz stronę, którą chcesz sprawdzić.
- Stuknij w trzy pionowe kropki w rogu okna przeglądarki.
- Przewiń w dół i wybierz Więcej narzędzi.
- Kliknij Narzędzia deweloperskie.
Możesz także użyć F12 klawisz funkcyjny, jeśli chcesz szybciej uzyskać dostęp do Inspect Element. Również kliknięcie prawym przyciskiem myszy na stronie internetowej i wybranie Sprawdź.
Jak korzystać z Inspect Element na komputerze Mac
Jeśli używasz komputera Mac, prawdopodobnie wybraną przeglądarką jest Safari. Otwieranie Inspect Elements w Safari jest nieco inne niż w Chrome i Firefox. Ale to jest równie proste dzięki następującym krokom:
- Otwórz przeglądarkę Safari.
- Kliknij Safari w zakładce nagłówka.
- Wybierać Preferencje z menu rozwijanego.
- Kliknij na Zaawansowany ikonę koła zębatego znajdującą się u góry ekranu.
- Zaznacz pole, które mówi Pokaż menu Develop na pasku menu.
Wykonanie tych kroków włącza funkcję Inspekcji elementu w przeglądarce. Jeśli nie włączysz najpierw Inspect Element, nie zobaczysz tej opcji po otwarciu strony internetowej.
Po wykonaniu tego kroku po prostu kliknij prawym przyciskiem myszy dowolną otwartą stronę internetową i wybierz Sprawdź. Możesz także użyć polecenia szybkich klawiszy: CMD + opcja + I (sprawdzać).
Jak korzystać z Inspect Element na iPhonie
Czy chcesz użyć funkcji Sprawdź elementy, aby zobaczyć, jak mobilna wersja strony internetowej wygląda na iPhonie? Możesz to i więcej zrobić w kilku prostych krokach. Ale zanim spojrzysz na element, musisz włączyć Inspektor sieciowy dla twojego urządzenia iOS:
- Iść do Ustawienia.
- Teraz wybierz Safari.
- Przewiń w dół i dotknij Menu zaawansowane.
- Teraz dotknij przełącznika, aby włączyć Inspektor sieciowy.
Musisz także upewnić się, że menu Develop jest włączone na Twoim Macu:
- Otwórz Safari.
- Wybierać Safari z górnych nagłówków.
- Następnie kliknij Preferencje.
- Następnie kliknij Zaawansowany.
- Zaznacz pole, które mówi Pokaż menu Develop na pasku menu.
Po włączeniu zarówno urządzenia mobilnego z systemem iOS, jak i komputera Mac, zobaczysz menu Opracuj na górnym pasku na komputerze Mac. Kliknij go, aby zobaczyć podłączony iPhone i stronę internetową aktywną na urządzeniu. Wybranie strony internetowej powoduje również otwarcie okna Inspektora sieci dla tej samej strony na ekranie komputera Mac.
Pamiętaj jednak, że te wskazówki działają tylko w Safari z systemem Mac, a nie w Safari w systemie Windows.
Jak korzystać z Inspect Element w Formularzach Google
Możesz również użyć elementu Inspect w Formularzach Google. Jeśli jednak szukasz odpowiedzi na quiz, nie masz szczęścia. Nie znajdziesz odpowiedzi osadzonych w kodowaniu. Możesz wyświetlić odpowiedzi tylko wtedy, gdy jesteś twórcą lub redaktorem formularza. Tak czy inaczej, jeśli jesteś uczniem odpowiadającym na quiz w Formularzach Google, zobaczysz tylko własne odpowiedzi.
- Możesz kliknąć formularz prawym przyciskiem myszy i wybrać Sprawdzać aby zobaczyć cały kod formularza.
Jak korzystać ze sprawdzania elementu, gdy jest zablokowany
Czasami okaże się, że nie możesz sprawdzić strony internetowej, a wybór Sprawdź jest wyszarzony, jeśli spróbujesz kliknąć ją prawym przyciskiem myszy. Możesz myśleć, że jest zablokowany, ale istnieje wiele sposobów na obejście tego:
Metoda 1 – Wyłącz JavaScript
- Wejść do Ustawienia.
- Szukaj "JavaScript”.
- Wyłączyć JavaScript.
Metoda 2 - Uzyskaj dostęp do narzędzi programistycznych w długim czasie
Zamiast klikać prawym przyciskiem myszy w celu sprawdzenia, wykonaj następujące czynności:
- Iść do Ustawienia w Twojej przeglądarce.
- Wybierać Więcej narzędzi.
- Przewiń w dół i kliknij Narzędzia deweloperskie.
Metoda 3 – Korzystanie z klawisza funkcyjnego
Możesz także spróbować użyć F12 klawisz funkcyjny na stronach internetowych, które blokują kliknięcie prawym przyciskiem myszy w celu sprawdzenia.
Być może będziesz musiał wypróbować wszystkie te metody, zanim natkniesz się na taką, która działa dla Ciebie. W ostateczności możesz również spróbować wyświetlić kod źródłowy, wpisując view-source: [wpisz pełny adres URL]. 
Jak korzystać z Inspect Element na Discord
Sprawdzanie swojego kodowania na Discord jest łatwym procesem. Po prostu użyj Ctrl + Shift + I polecenie lub F12 na stronie Discord.
Jak korzystać z Inspect Element na szkolnym Chromebooku
Jeśli Twój Chromebook został wydany przez szkołę, korzystanie z funkcji Sprawdź element obejmuje kilka prostych czynności:
- Kliknij stronę prawym przyciskiem myszy lub stuknij dwoma palcami i wybierz Sprawdzać.
- naciskać Ctrl + Shift + I.
- Spróbuj użyć metody view-source:[url], takiej jak „view-source://www.wikipedia.com", bez cudzysłowów.
Jednak niektóre szkoły i organizacje blokują tę funkcję. Jeśli więc to nie działa, może być konieczne skontaktowanie się z administratorem organizacji lub szkoły.
Jak używać elementu kontrolnego do znajdowania odpowiedzi
Możesz użyć Inspect Element, aby znaleźć odpowiedzi na różne rzeczy, takie jak:
- Podgląd projektu witryny na urządzeniach mobilnych.
- Dowiedz się słów kluczowych, których używają konkurenci.
- Testy prędkości.
- Zmiana tekstu na stronie internetowej.
- Znajdź krótkie przykłady, aby pokazać programistom, czego potrzebujesz.
Po uruchomieniu panelu Sprawdź element zobaczysz całe kodowanie witryny. Obejmuje to całe wbudowane kodowanie JavaScript, CSS i HTML. To tak, jakby zobaczyć kod źródłowy strony internetowej, z tą różnicą, że możesz wprowadzać zmiany w kodzie. Dodatkowo możesz zobaczyć wszelkie zmiany wprowadzane w czasie rzeczywistym.
To narzędzie sprawia, że jest nieocenione dla marketerów, projektantów i programistów, aby zobaczyć wszelkie zmiany w projekcie przed ich sfinalizowaniem. Jednak wprowadzanie zmian w kodowaniu za pomocą Inspect Element nie trwa wiecznie. Po ponownym załadowaniu strony powróci ona do stanu domyślnego.
Dodatkowe często zadawane pytania
Jak używać polecenia Sprawdź element, aby znaleźć odpowiedzi?
Jedynym sposobem na znalezienie odpowiedzi za pomocą funkcji Zbadaj element jest natychmiastowa ujawnienie go w witrynie po przesłaniu. W tym przypadku odpowiedzi są obecne w kodzie.
W przeciwnym razie po prostu wyświetlasz kod quizu lub testu podczas korzystania z funkcji Sprawdź element, a także wszelkie przesłane odpowiedzi.
Czy element kontrolny jest nielegalny?
Nie, narzędzie Inspect Element nie jest nielegalne, jest przeznaczone dla twórców stron internetowych. Przeglądanie kodu źródłowego strony internetowej nie jest nielegalne, staje się problemem tylko wtedy, gdy wykorzystujesz zebrane informacje do nikczemnych celów, takich jak próby wykorzystania exploitów itp.
Czy można wyłączyć sprawdzanie elementu w przeglądarce?
Krótka odpowiedź brzmi: nie.
Nie możesz wyłączyć Inspekcji Elementu w przeglądarce. Ale możesz ustawić parametry, które uniemożliwiają użytkownikom wykonywanie pewnych czynności, takich jak kliknięcie prawym przyciskiem myszy na stronie internetowej. Istnieje wiele samouczków online, które pozwalają ustawić odpowiednie skrypty wyłączające określone zdarzenia. Jednak nie można całkowicie wyłączyć funkcji Sprawdź element.
Poznaj tajniki strony internetowej
Sprawdzenie funkcji Inspect Element na stronie internetowej to prawdopodobnie narzędzie programistyczne, o którym nigdy nie wiedziałeś, że jest potrzebne – nawet jeśli sam nie jesteś programistą. Ma mnóstwo aplikacji do projektowania i marketingu, które mogą sprawić, że Twoja witryna będzie działać płynniej. A może dać ci przewagę nad konkurentem.
Do czego używasz Inspect Element? Opowiedz nam o tym w sekcji komentarzy poniżej.
