Jak sprawdzać elementy na komputerach Mac, Windows, iPhone i iPad

Deweloperzy i projektanci interfejsu użytkownika używają funkcji Inspect Element do modyfikowania witryn internetowych bez zmiany kodu źródłowego. Ale jak sprawdzać elementy bez odbywania kursu tworzenia stron internetowych?

Inspect Element to przydatne narzędzie programistyczne, które jest dostarczane z popularnymi przeglądarkami internetowymi. Musisz tylko wiedzieć, jak wdrożyć narzędzie za pomocą kilku kliknięć podczas przeglądania stron internetowych.

Możesz wykonać wiele magicznych sztuczek, takich jak zmiana układu witryny, robienie zrzutów ekranu bez tekstu, zmiana czcionek, modyfikowanie liczb i nie tylko.

Znajdź poniżej zwięzły przewodnik krok po kroku, aby dowiedzieć się, jak bez wysiłku sprawdzać elementy.

Co to jest element kontrolny?

Inspect Element to narzędzie do tworzenia stron internetowych dostępne w większości przeglądarek internetowych. Możesz go użyć do edycji kodu źródłowego frontonu dowolnej odwiedzanej witryny.

Zmiany, które wprowadzasz, zachodzą w piaskownicy w przeglądarce internetowej. Nie wprowadzasz więc żadnych zmian w rzeczywistej witrynie. Ponadto powierzchowne zmiany, które wprowadzasz, znikają po odświeżeniu strony.

Oto kilka kreatywnych sposobów jego wykorzystania:

• Musisz zrobić zrzut ekranu ze strony internetowej, a teksty na obrazie Cię niepokoją. Użyj narzędzia Inspect Element, aby usunąć te teksty.
• Chcesz zrobić dowcip znajomym, pokazując im swoje nazwisko w New York Times lub Washington Post. Inspect Element to najlepszy sposób, aby to zrobić.
• Testuj kody debugowania na stronach internetowych, stosując je w czasie rzeczywistym za pomocą narzędzia Inspect Element. Jeśli to działa, możesz zmienić kod źródłowy zaplecza.
• Jako sprzedawca cyfrowy możesz ujawniać słowa kluczowe konkurencji, tytuły SEO, metatagi itp., korzystając z tego potężnego narzędzia do tworzenia stron internetowych.

Jak sprawdzić elementy w systemie Windows

Korzystanie z narzędzia Inspect Element w systemie Windows jest absurdalnie łatwe. Poniżej znajduje się szczegółowy przewodnik dotyczący sprawdzania elementów przy użyciu różnych przeglądarek internetowych w systemie Windows:

Narzędzie do sprawdzania Google Chrome

Jak sprawdzić elementy w przeglądarce Windows Chrome

• Podczas korzystania z przeglądarki Google Chrome kliknij prawym przyciskiem myszy dowolne miejsce w witrynie.
• Pojawi się menu kontekstowe prawego przycisku myszy.
• U dołu zobaczysz Inspekcję .
• Kliknij opcję Sprawdź , aby wyświetlić kody HTML i CSS w panelu po prawej stronie .

Jak otworzyć inspekcję elementu w Chrome bez klikania prawym przyciskiem myszy?

Istnieje kilka przydatnych skrótów do otwierania narzędzia Inspect Element w przeglądarce Google Chrome dla systemu Windows. Te skróty klawiszowe są jak poniżej:

• Ctrl + Shift + C
• Klawisz funkcyjny F12

Powyższe skróty klawiszowe działają również w przeglądarce Mozilla dla systemu Windows.

Narzędzie inspektora Mozilli

Jak sprawdzić elementy w przeglądarce Windows Mozilla

W przeglądarce Mozilla proces jest taki sam jak w Google Chrome. Jednak okno inspektora pojawi się na dole przeglądarki zamiast po prawej stronie, jak w Google Chrome.

Narzędzie inspekcji Microsoft Edge

Jak sprawdzić elementy w przeglądarce Windows Edge

Co zaskakujące, Inspect Element Microsoft Edge działa podobnie do przeglądarki Google Chrome. Narzędzie Inspekcja jest dostępne po kliknięciu prawym przyciskiem myszy. Ponadto kody HTML i CSS pojawiają się po prawej stronie, podobnie jak Google Chrome.

Jak sprawdzić elementy na komputerze Mac

Czy używasz przeglądarki Google Chrome, Mozilla Firefox lub Microsoft Edge na komputerach Mac firmy Apple? Jeśli tak, możesz wdrożyć narzędzie Inspect Element, wykonując czynności wymienione powyżej w sekcji Windows.

Ale jeśli używasz domyślnej przeglądarki internetowej macOS, Safari, użycie narzędzia Inspect Element jest trudną grą. Domyślnie Safari nie wyświetla Inspect Element na komputerze Mac. Oto, co musisz zrobić:

Jak otworzyć Inspect Element na komputerze Mac

Po pierwsze, musisz aktywować narzędzia programistyczne w przeglądarce Safari na komputerze Mac. Oto jak:

• Uruchom przeglądarkę Safari .
• Odwiedź witrynę, w której chcesz sprawdzić elementy sieci.
• Wybierz Safari z górnego paska menu przeglądarki Safari.
• Kliknij Preferencje w otwartym menu kontekstowym.
• Na ekranie Preferencje wybierz opcję Zaawansowane .
• Zaznacz opcję Pokaż menu Develop na dole ekranu Preferencji zaawansowanych .

Pomyślnie włączyłeś narzędzia programistyczne w przeglądarce Safari na Maca. Teraz wykonaj następujące kroki, aby użyć Inspect Element:

• Na dowolnym elemencie witryny, takim jak tekst lub obraz, kliknij prawym przyciskiem myszy .
• Pojawi się menu kontekstowe. U dołu zobaczysz opcję Sprawdź element .
• Kliknij to, aby otworzyć sekcję debugowania pod witryną, pokazującą kody HTML i CSS .

What Are the Keys for Inspect Element?

Być może szukasz skrótów do programu Inspect Element na komputerze Mac. Możesz użyć następujących:

• Command + Shift + C
• Naciśnij klawisz Control , a następnie wybierz dowolny element.
• Kliknij gładzik dwoma palcami

Jak sprawdzić elementy na Chromebookach

Chromebook używa Google Chrome jako domyślnej przeglądarki. Dlatego po otwarciu dowolnej witryny wystarczy kliknąć prawym przyciskiem myszy, aby znaleźć opcję Sprawdź element w menu kontekstowym, które następuje.

Jeśli używasz Chromebooka w pracy lub szkole, możesz zadać to pytanie:

Why Can’t I Inspect on My School Chromebook?

Większość administratorów w szkołach i firmach wyłącza zaawansowane funkcje na Chromebookach, które udostępniają Ci do pracy lub nauki. Ponieważ narzędzia programistyczne są funkcjami zaawansowanymi, istnieje duże prawdopodobieństwo, że Twój szkolny lub służbowy Chromebook nie wyświetli narzędzia Inspect Element.

Jak sprawdzić elementy na iPadzie/iPhonie

Niestety nie można używać narzędzia Inspect Element na iPhonie lub iPadzie bez komputera Mac.

iOS i iPadOS mają Web Inspector dla aplikacji Safari. Jednak działa to tylko wtedy, gdy podłączysz urządzenie mobilne do komputera Mac, na którym już aktywowałeś narzędzia programistyczne dla Safari. Poniżej przedstawiono kroki, które możesz wypróbować:

• Otwórz aplikację Ustawienia iPada/iPhone'a .
• Kliknij Safari w okienku nawigacyjnym po lewej stronie.

Otwieranie ustawień Safari na iPadzie lub iPhonie

• Następnie przewiń w dół po prawej stronie, aby znaleźć i wybrać Zaawansowane .

Aktywacja Web Inspector na iPadzie i iPhonie

• Aktywuj przełącznik dla Inspektora sieci .
• Teraz podłącz urządzenie mobilne do komputera Mac za pomocą USB .
• Autoryzuj iPhone'a / iPada na komputerze Mac.
• Otwórz dowolną witrynę internetową na urządzeniu mobilnym w przeglądarce Safari.
• Teraz uruchom Safari na Macu i wybierz Develop na górnym pasku menu.
• W otwartym menu kontekstowym poszukaj nazwy swojego urządzenia mobilnego.
• Najedź kursorem na urządzenie mobilne, aby wyświetlić wszystkie otwarte strony internetowe.
• Teraz wybierz dowolną witrynę, aby wyświetlić kod źródłowy HTML i CSS w przeglądarce Safari na komputerze Mac.

Wniosek

Poznałeś już wszystkie możliwe sposoby użycia narzędzia Inspect Element do tymczasowej edycji strony internetowej. Nauczyłeś się również sprawdzać elementy dla różnych urządzeń, takich jak Mac, Windows, Chromebook, iPad i iPhone.

Następnym razem, gdy będziesz musiał zmodyfikować stronę internetową dla zabawy lub dla potrzeb zawodowych, wypróbuj te metody. Na pewno pokochasz te łatwe kroki w porównaniu z innymi skomplikowanymi metodami wyjaśnionymi gdzie indziej.

Nie zapomnij zostawić komentarzy poniżej, jeśli powyższe kroki Ci pomogły, jaka metoda jest dla Ciebie trudna lub jakieś tajne wskazówki dotyczące narzędzia Inspect Element.

Potrzebujesz strony internetowej jako drukowanej referencji? Dowiedz się, jak szybko zapisać stronę internetową jako plik PDF już teraz!