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
- Podczas używania Google Chrome, kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie internetowej.
- Pojawi się menu kontekstowe prawego przycisku myszy.
- Na dole zobaczysz Sprawdzać.
- Kliknij Sprawdzać aby wyświetlić kody HTML i CSS na a panel 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:
- klawisz kontrolny + Zmiana + C
- Klawisz funkcyjny F12
Powyższe skróty klawiszowe działają również w przeglądarce Mozilla dla systemu Windows.
Narzędzie inspektora Mozilli
W przeglądarce Mozilla proces jest taki sam jak w Google Chrome. Jednakże Inspektor okno pojawi się na dole przeglądarki zamiast po prawej stronie, jak w Google Chrome.
Narzędzie inspekcji Microsoft 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 korzystasz z 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:
- Uruchomić the Przeglądarka Safari.
- Odwiedź witrynę, w której chcesz sprawdzić elementy sieci.
- Wybierać Safari z górnego paska menu przeglądarki Safari.
- Kliknij Preferencje z menu kontekstowego, które zostanie otwarte.
- Na Ekran preferencji, wybierać Zaawansowany.
- Zaznacz Pokaż rozwój menu na dole Zaawansowane preferencje ekran.
Pomyślnie włączyłeś narzędzia programistyczne w 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. Na dole zobaczysz Sprawdź element.
- Kliknij to, aby otworzyć sekcję debugowania pod witryną pokazującą HTML i CSS kody.
Jakie są klucze do Inspect Element?
Być może szukasz skrótów do programu Inspect Element na komputerze Mac. Możesz użyć następujących:
- Komenda + Zmiana + C
- wciśnij Kontrola 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:
Dlaczego nie mogę przeprowadzić inspekcji na szkolnym Chromebooku?
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 Chromebook szkolny lub służbowy 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 iPada/iPhone'a Ustawienia aplikacja.
- Kliknij Safari w okienku nawigacyjnym po lewej stronie.
- Następnie przewiń w dół po prawej stronie, aby znaleźć i wybrać Zaawansowany.
- Aktywuj przełącznik dla Inspektor 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 komputerze Mac i wybierz Rozwijać 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
Zbadałeś 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? Nauczyć się jak szybko zapisać stronę internetową jako plik PDF Teraz!