Jak korzystać z Inspekcji elementu

Łącza urządzeń

• Android
• Chromebook
• Prochowiec
• Okna
• Brak urządzenia?

Większość ludzi nie zdaje sobie sprawy, że mają do dyspozycji skarbnicę narzędzi programistycznych, ukrytą w ich ulubionej przeglądarce.

Każda przeglądarka internetowa oferuje narzędzia programistyczne do sprawdzania kodu strony internetowej. Jednak dla przeciętnego internauty jest podmiotem obcym. W końcu kto chce patrzeć na kodowanie strony internetowej, prawda?

Jak się okazuje, jest wiele rzeczy, których można się nauczyć, patrząc na kodowanie strony internetowej. Czytaj dalej, aby dowiedzieć się, co oferuje funkcja sprawdzania elementów i jak z niej korzystać.

Większość przeglądarek ma narzędzia do sprawdzania elementów witryny, ale generalnie wszystkie działają w ten sam sposób.

Używanie Inspect Element w Google Chrome

1. Otwórz witrynę, którą chcesz sprawdzić.
   
2. Kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz Sprawdź .
   
   LUB
3. Kliknij trzy pionowe kropki w prawym rogu paska narzędzi.
   
4. Przejdź do Więcej narzędzi .
   
5. Wybierz Narzędzia dla programistów .
   
   LUB
6. Naciśnij klawisz skrótu klawiaturowego F12 na komputerze PC (lub CMD + Opcje + I na komputerze Mac).
   

Używanie Inspekcji elementu w Microsoft Edge

1. Otwórz stronę internetową.
   
2. Kliknij trzy pionowe kropki w prawym górnym rogu paska narzędzi przeglądarki.
   
3. Przewiń w dół i kliknij Więcej narzędzi .
   
4. Kliknij Narzędzia dla programistów .
   
   LUB
5. Kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie internetowej i kliknij Sprawdź .
   
   LUB
6. Naciśnij Ctrl + Shift + I .
   

Każda z tych trzech metod da ci ten sam wynik.

Jeśli zrobiłeś to poprawnie, u dołu przeglądarki otworzy się nowe okienko. Są to Narzędzia programistyczne i obejmują 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:

1. Kliknij trzy poziome kropki w górnym rogu panelu Narzędzia dla programistów.
   
2. Wybierz stronę dokowania (lewą, dolną lub prawą) lub oddokuj do osobnego okna.
   

Najechanie kursorem na krawędź ramki panelu narzędzi deweloperskich 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 wymaganych kroków mogło zostać omówionych po prostu pokazując, jak korzystać z Inspect Element w przeglądarce, 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 do Inspect Element . Oto mały kurs odświeżający dla Ciebie:

1. Otwórz stronę internetową.
   
2. Kliknij trzy pionowe kropki w prawym górnym rogu paska narzędzi.
   
3. Wybierz Więcej narzędzi .
   
4. Kliknij Narzędzia dla programistów .
   

Możesz także użyć metody kliknięcia prawym przyciskiem myszy lub klawisza funkcyjnego F12 , aby szybciej uzyskać dostęp do narzędzi programistycznych.

Jak korzystać z Inspect Element na urządzeniu z Androidem

Uruchamianie Inspect Element na urządzeniu z Androidem jest nieco inne. Sprawdź, jak dostać się do panelu Inspect Element na Androidzie:

1. Naciśnij klawisz funkcyjny F12 .
   
2. Wybierz opcję Przełącz pasek urządzeń .
   
3. Wybierz urządzenie z systemem Android z menu rozwijanego.
   

Gdy wybierzesz określone urządzenie z Androidem, zauważysz, że ładuje się mobilna wersja witryny. Odtąd możesz swobodnie korzystać z funkcji Inspect Element na swoim urządzeniu z Androidem, siedząc wygodnie na swoim komputerze.

Ta metoda działa zarówno w przeglądarkach Chrome, jak i Firefox, ponieważ mają one funkcję w swoich narzędziach programistycznych o nazwie Device Simulation.

Działa również w ten sam sposób na urządzeniach iPhone. Wystarczy wybrać właściwy z rozwijanego menu.

Jak korzystać z elementu Inspect w systemie Windows

Narzędzie Inspect Element niekoniecznie jest specyficzne dla systemu operacyjnego, ale jest specyficzne dla przeglądarki. Oznacza to, że Narzędzia programistyczne są funkcją przeglądarki, której używasz, a niekoniecznie systemu Windows. Możesz jednak przejść do panelu Inspekcja elementu niezależnie od preferowanej przeglądarki.

Jeśli korzystasz z systemu operacyjnego Windows, prawdopodobnie korzystasz także z przeglądarki Microsoft Edge. Sprawdź, jak uzyskać dostęp do Inspect Element w MS Edge:

1. Otwórz witrynę, którą chcesz sprawdzić.
   
2. Stuknij w trzy pionowe kropki w rogu okna przeglądarki.
   
3. Przewiń w dół i wybierz Więcej narzędzi .
   
4. Kliknij Narzędzia dla programistów .
   

Możesz także użyć klawisza funkcyjnego F12 , aby uzyskać szybszy dostęp do Inspect Element. Również kliknięcie strony internetowej prawym przyciskiem myszy i wybranie Inspekcji również działa.

Jak korzystać z narzędzia Inspect Element na komputerze Mac

Jeśli używasz komputera Mac, wybraną przeglądarką jest prawdopodobnie Safari. Otwieranie Inspect Elements w Safari jest nieco inne niż w Chrome i Firefox. Ale jest to równie proste dzięki tym krokom:

1. Otwórz przeglądarkę Safari.
   
2. Kliknij Safari na karcie nagłówka i wybierz Preferencje z menu rozwijanego.
   
3. Kliknij ikonę zaawansowanego koła zębatego znajdującą się u góry ekranu.
   
4. Zaznacz pole wyboru Pokaż menu Develop na pasku menu .
   

Wykonanie tych kroków włącza funkcję Inspekcji elementu w Twojej przeglądarce. Jeśli najpierw nie włączysz opcji Sprawdź element, nie zobaczysz tej opcji podczas otwierania witryny.

Po wykonaniu tego kroku kliknij prawym przyciskiem myszy dowolną otwartą stronę internetową i wybierz Sprawdź. Możesz także użyć polecenia szybkich klawiszy: CMD + Option + I (inspekcja).

Jak korzystać z Inspect Element na iOS

Czy chcesz skorzystać z funkcji Inspekcja elementów, aby zobaczyć, jak mobilna wersja strony internetowej wygląda na iPhonie? Możesz zrobić to i więcej, wykonując zaledwie kilka prostych kroków. Ale zanim spojrzysz na element, musisz włączyć Web Inspector na swoim urządzeniu z iOS:

1. Przejdź do Ustawień .
   
2. Teraz wybierz Safari .
   
3. Przewiń w dół i dotknij opcji Menu zaawansowane .
   
4. Teraz dotknij przełącznika, aby włączyć Web Inspector .
   

Upewnij się również, że menu Programowanie jest włączone na komputerze Mac, wykonując czynności opisane w powyższej sekcji.

Po włączeniu zarówno urządzeń mobilnych z systemem iOS, jak i komputerów Mac, zobaczysz menu Develop na górnym pasku na Macu. 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 przeglądarce Safari na komputerze Mac, a nie w przeglądarce Safari w systemie Windows.

Jak korzystać z Inspekcji elementu, gdy jest zablokowany

Czasami okaże się, że nie możesz sprawdzić strony internetowej, a opcja Sprawdź jest wyszarzona, jeśli spróbujesz kliknąć ją prawym przyciskiem myszy. Możesz pomyśleć, że jest zablokowany, ale jest na to wiele sposobów:

Metoda 1 – Wyłącz Javascript

1. Przejdź do Ustawień .
   
2. Szukaj w JavaScript .
   
3. Wyłącz JavaScript .
   

Metoda 2 — Uzyskaj dostęp do narzędzi programistycznych na dłuższą metę

Zamiast klikać prawym przyciskiem myszy w celu sprawdzenia, wykonaj następujące czynności:

1. Przejdź do Ustawień w swojej przeglądarce.
   
2. Wybierz Więcej narzędzi .
   
3. Przewiń w dół i kliknij Narzędzia dla programistów .
   

Metoda 3 – Korzystanie z klawisza funkcyjnego

Możesz także spróbować użyć klawisza funkcyjnego F12 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 znajdziesz taką, która Ci odpowiada. W ostateczności możesz też spróbować wyświetlić kod źródłowy, wpisując view-source: [enter full url] .

Jak korzystać z narzędzia Inspect Element na szkolnym Chromebooku

Jeśli Twój Chromebook został wydany przez szkołę, skorzystanie z funkcji Inspekcja elementów obejmuje kilka prostych kroków:

1. Kliknij prawym przyciskiem myszy lub dotknij dwoma palcami na stronie internetowej i wybierz Sprawdź .
   
2. Naciśnij Ctrl + Shift + I .
   
3. Spróbuj użyć metody view-source:[url], takiej jak view-source:https://www.wikipedia.com .
   
   

Jednak niektóre szkoły i organizacje blokują tę funkcję, więc jeśli nie działa ona w Twoim przypadku, może być konieczne skontaktowanie się z administratorem Twojej organizacji lub szkoły.

Jak korzystać z Inspect Element, aby znaleźć odpowiedzi

Możesz użyć Inspect Element, aby znaleźć odpowiedzi na różne pytania, takie jak:

• Podgląd projektu witryny na urządzeniach mobilnych.
• Dowiedz się, jakich słów kluczowych używa konkurencja.
• Testy prędkości.
• Zmiana tekstu na stronie internetowej.
• Znajdź szybkie przykłady, aby pokazać programistom, czego potrzebujesz.

Po uruchomieniu panelu Inspect Element zobaczysz całe kodowanie strony. Obejmuje to całe wbudowane kodowanie JavaScript, CSS i HTML. To tak, jakby zobaczyć kod źródłowy strony internetowej, z wyjątkiem tego, że możesz wprowadzać zmiany w kodzie. Ponadto możesz zobaczyć wszelkie zmiany wprowadzone w czasie rzeczywistym.

Dzięki temu narzędziu marketerzy, projektanci i programiści mogą przeglądać wszelkie zmiany projektowe 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

Jeśli po przeczytaniu powyższego tekstu nie jesteś ekspertem w zakresie Inspect Element, tutaj znajdziesz więcej odpowiedzi.

Jak użyć polecenia Inspekcja elementu, aby znaleźć odpowiedzi?

Jedynym sposobem na znalezienie odpowiedzi za pomocą funkcji Inspect Element jest natychmiastowe ujawnienie go w witrynie po przesłaniu. W tym przypadku odpowiedzi są obecne w kodowaniu.

W przeciwnym razie po prostu przeglądasz kodowanie quizu lub testu podczas korzystania z funkcji Sprawdź element, a także wszelkie przesłane odpowiedzi.

Czy Inspekcja elementu jest nielegalna?

Nie, narzędzie Inspect Element nie jest nielegalne; jest przeznaczony dla twórców stron internetowych. Przeglądanie kodu źródłowego witryny internetowej nie jest nielegalne; staje się problemem tylko wtedy, gdy wykorzystujesz zebrane informacje do niecnych celów, takich jak próby wykorzystania exploitów itp.

Czy można wyłączyć opcję Inspect Element 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 klikanie strony internetowej prawym przyciskiem myszy. Istnieje wiele samouczków online, aby ustawić odpowiednie skrypty wyłączające określone zdarzenia. Jednak nie można całkowicie wyłączyć funkcji Inspect Element.

Poznaj wnętrze strony internetowej

Sprawdzanie funkcji Inspect Element na stronie internetowej jest prawdopodobnie narzędziem programistycznym, 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? Powiedz nam o tym w sekcji komentarzy poniżej.