Większość ludzi nie zdaje sobie sprawy, że mają do dyspozycji skarbnicę narzędzi programistycznych i że jest ona ukryta w ich ulubionej przeglądarce.
Każda przeglądarka internetowa oferuje narzędzia programistyczne umożliwiające sprawdzenie kodowania witryny, jednak dla przeciętnego użytkownika internetu jest to podmiot zagraniczny. W końcu kto chce przyjrzeć się kodowaniu witryny, prawda?
Okazuje się, że jest wiele rzeczy, których możesz się nauczyć, patrząc na kodowanie witryny. Czytaj dalej, aby dowiedzieć się, co ma do zaoferowania funkcja inspekcji elementu i jak z niej korzystać.
Jak używać Sprawdź element
Większość przeglądarek ma narzędzia do inspekcji elementów witryny, ale generalnie wszystkie one działają w ten sam sposób.
Korzystanie z Inspect Element w Google Chrome
- Otwórz witrynę, którą chcesz sprawdzić.
- Kliknij prawym przyciskiem myszy w dowolnym miejscu strony i wybierz Sprawdzać .
LUB - Kliknij trzy pionowe kropki w prawym rogu paska narzędzi.
- Iść do Więcej narzędzi .
- Wybierz Narzędzia deweloperskie .
LUB - wciśnij F12 klawisz skrótu klawiaturowego na komputerze PC lub CMD + Opcje + I na komputerze Mac.
Korzystanie z funkcji Inspect Element w Microsoft Edge
- Otwórz witrynę 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 w witrynie.
- Kliknij Sprawdzać .
LUB - naciśnij Ctrl + Shift + I .
Każda z tych trzech metod da ten sam wynik.
Jeśli zrobiłeś to poprawnie, u dołu przeglądarki pojawi się nowe okienko. Są to Narzędzia dla programistów i obejmują kartę Elementy. To jest narzędzie, którego potrzebujesz do inspekcji elementu.
jak włączyć robota nocnego na czacie
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ędzi dla programistów:
- Kliknij trzy pionowe kropki w górnym rogu panelu Narzędzi dla programistów.
- Wybierz stronę dokowania (lewą, dolną lub prawą) lub oddokuj do oddzielnego okna.
Umieszczenie kursora obok krawędzi ramki panelu Narzędzi dla programistów i przeciągnięcie 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.
Jak używać elementu Inspect do znajdowania odpowiedzi
Możesz użyć opcji Sprawdź element, aby znaleźć odpowiedzi na różne rzeczy, takie jak:
- Podgląd projektu witryny na urządzeniach mobilnych.
- Dowiedz się słowa kluczowe, których używają konkurenci.
- Testy szybkoś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 wprowadzić zmiany w kodzie. Dodatkowo możesz zobaczyć wszelkie zmiany wprowadzone w czasie rzeczywistym.
Dzięki temu narzędziu marketerzy, projektanci i deweloperzy mogą przeglądać wszelkie zmiany w projekcie przed ich sfinalizowaniem. Jednak wprowadzanie zmian w kodowaniu za pomocą funkcji Inspect Element nie trwa wiecznie. Po ponownym załadowaniu strony powróci ona do stanu domyślnego.
Jak używać elementu Inspect na Chromebooku
Domyślną przeglądarką na Chromebookach jest Google, więc postępuj zgodnie z instrukcjami przeglądarki Chrome, aby uzyskać do niej dostęp Sprawdź element . Oto mały kurs odświeżający dla Ciebie:
- Otwórz witrynę internetową.
- Kliknij trzy pionowe linie w prawym górnym rogu paska narzędzi.
- Wybierz Więcej narzędzi .
- Kliknij Narzędzia deweloperskie .
Możesz także użyć metody kliknięcia prawym przyciskiem myszy lub F12 klawisz funkcyjny, aby szybciej uzyskać dostęp do narzędzi programistycznych.
Jak używać elementu Inspect na Androidzie
Uruchomienie Inspect Element na urządzeniu z Androidem wygląda nieco inaczej. Sprawdź, jak dostać się do panelu Sprawdź element w systemie Android:
- wciśnij F12 klawisz funkcyjny.
- Wybierać Przełącz pasek urządzeń .
- Wybierz urządzenie z systemem Android z menu rozwijanego.
Po wybraniu konkretnego urządzenia z Androidem zauważysz, że wczytuje się mobilna wersja witryny. Stąd możesz swobodnie korzystać z funkcji Sprawdź element na swoim urządzeniu z Androidem, siedząc wygodnie na 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 Symulacja urządzenia.
Działa to również w ten sam sposób w przypadku urządzeń iPhone. Wystarczy, że wybierzesz właściwy z rozwijanego menu.
Jak używać 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 deweloperskie są funkcją używanej przeglądarki i niekoniecznie systemu Windows. Możesz jednak przejść do panelu Sprawdź element niezależnie od preferowanej przeglądarki.
Jeśli używasz systemu operacyjnego Windows, prawdopodobnie używasz też przeglądarki Microsoft Edge. Sprawdź, jak uzyskać dostęp do Inspect Element w MS Edge:
- Otwórz witrynę, 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ć klawisza funkcyjnego F12, jeśli chcesz uzyskać szybszy dostęp do Inspekcji elementu. Również kliknięcie prawym przyciskiem myszy na stronie internetowej i wybranie opcji Sprawdź działa również.
Jak używać elementu Inspect w przeglądarce Chrome
Istnieją trzy sposoby uzyskania dostępu do Inspect Element w przeglądarce Chrome. Możesz:
jak stworzyć obraz wektorowy w gimp
- Kliknij menu ustawień lub trzy pionowe kropki w przeglądarce i przejdź do Więcej narzędzi> Narzędzia dla programistów .
- Kliknij prawym przyciskiem myszy stronę internetową i wybierz Sprawdzać .
- Posługiwać się Ctrl + Shift + I (Sprawdzać).
Pierwszy sposób jest bardziej intuicyjny do zapamiętania dla nowych użytkowników Inspect Element. Jeśli jednak planujesz często korzystać z tej funkcji, klawisze szybkiego dostępu mogą się przydać.
Jak korzystać z funkcji Inspect Element na komputerze Mac
Jeśli używasz komputera Mac, wybraną przeglądarką jest prawdopodobnie Safari. Otwieranie Inspect Elements w przeglądarce Safari przebiega nieco inaczej niż w przeglądarce Chrome i Firefox. Ale jest to równie proste, wykonując te czynności:
- Otwórz przeglądarkę Safari.
- Kliknij Safari w zakładce nagłówka.
- Wybierz Preferencje z menu rozwijanego.
- Kliknij na zaawansowane 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 czynności powoduje włączenie funkcji Sprawdź element w przeglądarce. Jeśli najpierw nie włączysz opcji Sprawdź element, nie zobaczysz opcji po otwarciu witryny internetowej.
Po wykonaniu tego kroku kliknij prawym przyciskiem dowolną otwartą stronę internetową i wybierz opcję Sprawdź. Możesz także użyć polecenia klawiszy szybkiego dostępu: CMD + opcja + I (sprawdzać).
Jak używać elementu Inspect w Formularzach Google
Możesz także użyć elementu Inspect w Google Forms. Jeśli jednak szukasz odpowiedzi na quiz, nie masz szczęścia. Nie znajdziesz odpowiedzi osadzonych w kodowaniu.
Odpowiedzi możesz wyświetlać tylko wtedy, gdy jesteś twórcą lub redaktorem formularza. Jeśli jednak jesteś uczniem rozwiązującym quiz w Formularzach Google, zobaczysz tylko własne odpowiedzi.
Tak czy inaczej, możesz kliknąć formularz prawym przyciskiem myszy i wybrać Sprawdzać aby zobaczyć cały kod formularza.
Jak korzystać z funkcji Inspect Element na iPhonie
Czy chcesz skorzystać z funkcji Inspect Elements, aby zobaczyć, jak mobilna wersja strony internetowej wygląda na telefonie iPhone? Możesz to zrobić i nie tylko, wykonując kilka prostych czynności. Ale zanim spojrzysz na element, musisz włączyć Inspektora sieci na swoim urządzeniu z iOS:
- Iść do Ustawienia .
- Wybierz Safari .
- Przewiń w dół i dotknij Menu zaawansowane .
- Dotknij, aby włączyć Inspektor sieci .
Musisz również upewnić się, że menu Develop jest włączone na komputerze Mac:
- Otwórz Safari.
- Wybierz Safari z górnych nagłówków.
- Kliknij Preferencje .
- Kliknij zaawansowane .
- 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 Maca, na górnym pasku na Macu pojawi się menu Programowanie. 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 przypadku Safari na komputerze Mac, a nie Safari w systemie Windows.
Jak korzystać z funkcji Sprawdź element, gdy jest zablokowany
Czasami okaże się, że nie możesz sprawdzić strony internetowej, a zaznaczenie Sprawdź jest wyszarzone, 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
- Wejść do Ustawienia .
- SzukajJavaScript.
- Wyłączyć JavaScript .
Metoda 2 - Długa droga do narzędzi deweloperskich
Zamiast klikania prawym przyciskiem myszy w celu sprawdzenia, wykonaj następujące czynności:
- Iść do Ustawienia w Twojej przeglądarce.
- Wybierz Więcej narzędzi .
- Przewiń w dół i kliknij Ustawienia programisty .
Metoda 3 - użycie klawisza funkcyjnego
jak pozbyć się asystenta google
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 znajdziesz taką, która będzie dla Ciebie odpowiednia. W ostateczności możesz również spróbować wyświetlić kod źródłowy, wpisując źródło-widoku: [wprowadź pełny adres URL] .
Jak korzystać z Inspect Element na Discord
Sprawdzenie swojego kodowania na Discordzie to łatwy proces. Po prostu użyj Ctrl + Shift + I polecenie lub F12 na stronie Discord.
Jak korzystać z funkcji Inspect Element na szkolnym Chromebooku
Jeśli Twój Chromebook został wydany przez szkołę, skorzystanie z funkcji Sprawdź element obejmuje kilka prostych kroków:
- Kliknij stronę internetową prawym przyciskiem myszy lub stuknij dwoma palcami i wybierz Sprawdzać .
LUB - naciśnij Ctrl + Shift + I
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.
Dodatkowe FAQ
Jak użyć polecenia Sprawdź element, aby znaleźć odpowiedzi?
Jedynym sposobem znalezienia odpowiedzi za pomocą funkcji Sprawdź element jest sytuacja, gdy witryna internetowa ujawni je natychmiast po przesłaniu. W tym przypadku odpowiedzi są obecne w kodowaniu.
W przeciwnym razie po prostu przeglądasz kod quizu lub testu podczas korzystania z funkcji Sprawdź element, a także wszelkie przesłane odpowiedzi.
Czy inspekcja elementu jest nielegalna?
Nie, element Inspect nie jest nielegalny. Przeglądanie kodu źródłowego witryny internetowej nie jest nielegalne, staje się problemem tylko wtedy, gdy używasz zebranych informacji w niecnych celach, takich jak próby wykorzystania luk itp.
Czy można wyłączyć sprawdzanie elementu w przeglądarce?
Krótka odpowiedź brzmi: nie.
Nie możesz wyłączyć elementu Inspect w przeglądarce. Możesz jednak ustawić parametry, które uniemożliwiają użytkownikom wykonywanie pewnych czynności, takich jak kliknięcie prawym przyciskiem myszy na stronie internetowej. W Internecie dostępnych jest wiele samouczków, które pozwalają ustawić odpowiednie skrypty, aby wyłączyć określone zdarzenia. Jednak w rzeczywistości nie można całkowicie wyłączyć funkcji Sprawdź element.
Poznaj wnętrze strony internetowej
Sprawdzenie funkcji Sprawdź 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ą. Zawiera mnóstwo aplikacji do projektowania i marketingu, które mogą sprawić, że Twoja witryna będzie działać płynniej. I może dać ci przewagę nad konkurentem.
Do czego używasz Inspect Element? Opowiedz nam o tym w sekcji komentarzy poniżej.
