Jak korzystać z narzędzia Inspect Element w przeglądarce

Jeśli pracujesz z wieloma stronami internetowymi, prawdopodobnie zawsze poszukujesz szybszych i wydajniejszych sposobów realizacji zadań. Jeśli tak, narzędzie Sprawdź element, dostępne w większości głównych przeglądarek, może być przydatnym zasobem, który warto mieć pod ręką. Dzięki niemu możesz szybko identyfikować klasy CSS, podglądać zmiany elementów na stronie, symulować witrynę na urządzeniach mobilnych i wiele więcej.

W tym artykule przedstawimy narzędzie Zbadaj element i pokażemy, jak uzyskać do niego dostęp w najpopularniejszych przeglądarkach internetowych. Następnie przeprowadzimy Cię przez kilka przykładów, jak możesz go używać w ramach przepływu pracy w tworzeniu stron internetowych.

Zagłębmy się!

Jak uzyskać dostęp do narzędzia inspekcji elementu w głównych przeglądarkach

Narzędzie Inspect Element to narzędzie, które umożliwia przeglądanie podstawowego kodu źródłowego dowolnej strony internetowej. Dodatkowo możesz go używać do wprowadzania tymczasowych zmian i oglądania wyników w czasie rzeczywistym, pozostawiając oryginalny kod źródłowy nienaruszony. Jest to niezwykle przydatne, jeśli chcesz przetestować zmianę lub zdiagnozować problem. Może się również przydać, jeśli napotkasz witrynę z funkcją, którą lubisz i jesteś ciekawy, jak została zaimplementowana.

Większość głównych przeglądarek – w tym Chrome, Firefox i Safari – oferuje odmianę tego narzędzia. Przyjrzyjmy się, jak uzyskać do niego dostęp w każdym z nich.

Dostęp do elementu inspekcji w Google Chrome

Istnieją trzy sposoby uzyskania dostępu do narzędzia Sprawdź element w Chrome:

• Kliknij prawym przyciskiem myszy element na stronie i wybierz Sprawdź .
• Kliknij menu z trzema kropkami w prawym górnym rogu okna i wybierz Więcej narzędzi > Narzędzia programistyczne.
• Naciśnij Ctrl + Shift + C na klawiaturze ( Cmd + Option + C na Macu).

Gdy narzędzie się otworzy, wyświetli podzielony widok. Z jednej strony masz podgląd sprawdzanej witryny, a także kilka elementów sterujących, aby dostosować widok i symulować różne rozdzielczości ekranu:

Z drugiej strony jest kilka okienek zawierających informacje. Górny panel to kod HTML strony. Najechanie kursorem na część kodu podświetli odpowiedni obszar strony po prawej stronie:

Poniżej znajduje się okienko z informacjami o stronie. Wyświetlane tutaj szczegóły różnią się w zależności od wybranych kart. Na powyższych zrzutach ekranu pokazuje style CSS strony.

Dolne okienko to po prostu wiadomości i aktualizacje dotyczące Narzędzi dla programistów Chrome. Możesz bezpiecznie zamknąć to, aby zmniejszyć bałagan, klikając X .

Na koniec możesz zmienić lokalizację tych paneli, klikając menu z trzema kropkami w prawym górnym rogu panelu HTML i wybierając jedną z opcji dokowania.

Dostęp do elementu inspekcji w przeglądarce Mozilla Firefox

Narzędzie Inspect Element w Firefoksie jest dość podobne do narzędzia Chrome i można do niego uzyskać dostęp w podobny sposób:

• Kliknij prawym przyciskiem myszy element na stronie i wybierz opcję Sprawdź element.
• Kliknij menu hamburgerów w prawym górnym rogu okna przeglądarki Firefox i wybierz Web Developer > Inspector .
• Naciśnij Ctrl + Shift + C na klawiaturze ( Cmd + Option + C na Macu).

Firefox domyślnie umieszcza panele informacyjne na dole ekranu:

Możesz je jednak łatwo przenieść, klikając menu z trzema kropkami i wybierając inną opcję.

Dostęp do elementu inspekcji w Safari

Na komputerach Mac przeglądarka Safari oferuje również narzędzie Sprawdź element. Jest jednak dodatkowy krok, aby uzyskać do niego dostęp — musisz włączyć narzędzia programistyczne Safari.

Aby to zrobić, przejdź do paska menu u góry ekranu i przejdź do Safari> Preferencje> Zaawansowane . Następnie możesz zaznaczyć odpowiednie pole, aby włączyć narzędzia programistyczne:

Po włączeniu możesz uzyskać dostęp do funkcji Sprawdź element podobnie jak w innych przeglądarkach:

• Kliknij element prawym przyciskiem myszy i wybierz opcję Sprawdź element .
• Na górnym pasku menu przejdź do opcji Develop > Show Web Inspector.
• Naciśnij Cmd + Opcja + I na klawiaturze.

Początkowy układ narzędzia Safari różni się nieco od przeglądarek:

Jednak, podobnie jak w Chrome i Firefox, możesz go łatwo dostosować, klikając ikony w lewym górnym rogu okna inspektora.

5 najczęstszych zastosowań narzędzia inspekcji elementu

Teraz, gdy już wiesz, jak uzyskać dostęp do narzędzia Zbadaj element, przyjrzyjmy się kilku przydatnym rzeczom, które możesz z nim zrobić. Istnieje mnóstwo możliwości, ale poniższe zastosowania są jednymi z najczęstszych. Pamiętaj, że w tych przykładach będziemy używać Chrome, ale funkcje powinny działać podobnie w innych przeglądarkach.

1. Znajdź klasy CSS na stronie internetowej

Jednym z najbardziej użytecznych sposobów wykorzystania funkcji Inspect Element jest znajdowanie szczegółów w kaskadowych arkuszach stylów (CSS) strony. Jest to przydatne z kilku powodów. Po pierwsze, jeśli po prostu przeglądasz Internet i natrafisz na stronę, której styl naprawdę Ci się podoba, możesz zajrzeć do CSS, aby zebrać kilka pomysłów na własny projekt strony internetowej.

Przydaje się również na własnej stronie. Na przykład, jeśli element nie wygląda całkiem dobrze, możesz szybko go sprawdzić, aby upewnić się, że używa poprawnego CSS.

Istnieją dwa podstawowe sposoby sprawdzania stylów za pomocą Inspekcji elementu. Jeśli chcesz szybko wyświetlić pojedynczy element, możesz najechać na niego kursorem w okienku podglądu, aby wyświetlić podstawowe informacje na jego temat:

Tutaj możesz zobaczyć schemat kolorów, czcionkę, marginesy i inne elementy nagłówka na naszym blogu. W szczegółowych panelach narzędzie podświetla również odpowiedni kod, dzięki czemu możesz dokładnie zobaczyć, co się dzieje. Kliknięcie elementu w podglądzie zaktualizuje panel stylów, aby pokazać również jego CSS:

Jeśli wydaje się, że najechanie kursorem na element nic nie robi, upewnij się, że ikona kursora w panelu inspektora jest podświetlona na niebiesko:

Jeśli znasz konkretną klasę lub styl CSS, którego szukasz i chcesz zobaczyć każdy element, który go używa, możesz również użyć funkcji wyszukiwania. Przy otwartym inspektorze naciśnij Ctrl + Shift + F na klawiaturze ( Cmd + Shift + F na Macu). Spowoduje to otwarcie pola wyszukiwania, w którym możesz przeszukać kod strony . Odpowiednie wyniki zostaną podświetlone, tak jak w przypadku przeszukiwania dokumentu.

2. Rozwiązywanie problemów z witryną

Narzędzie Sprawdź element jest niezwykle przydatne przy rozwiązywaniu problemów. Na przykład, jeśli kolor lub czcionka elementu nie wygląda całkiem dobrze, możesz to szybko sprawdzić za pomocą narzędzia opisanego w poprzedniej sekcji.

Możesz także edytować kod HTML strony bezpośrednio za pomocą narzędzia Sprawdź element. Po prostu kliknij dwukrotnie kod, który chcesz zmienić, aby go edytować.

Zwróć uwagę, że kod nie jest w rzeczywistości zmieniany na stronie – jeśli odświeżysz stronę, powróci ona do swojej pierwotnej postaci. Ta funkcja jest jednak niezwykle przydatna do szybkich testów i rozwiązywania problemów.

Wreszcie, wbudowany debuger jest bardziej zaawansowanym narzędziem, którego można użyć, aby zobaczyć wszelkie komunikaty o błędach, które pojawiają się za kulisami. Aby uzyskać do niego dostęp, kliknij Konsola u góry okna Inspektora:

Dostępne są również inne zakładki do przeglądania źródeł, aktywności sieciowej i nie tylko. Aby uzyskać dostęp do pełnej listy, kliknij ikonę podwójnej strzałki u góry inspektora.

3. Edytuj tekst, aby wyświetlić podgląd zmian

Jednym z najlepszych zastosowań Inspect Element jest szybki podgląd zmian w tekście, czcionce lub kolorze strony. W ten sposób możesz dokładnie zobaczyć, jak wygląda Twój pomysł, nawet bez logowania się do pulpitu WordPress.

Aby edytować element, kliknij go prawym przyciskiem myszy i wybierz Sprawdź. Spowoduje to otwarcie narzędzia z fokusem na kodzie tego elementu. Jeśli masz już otwartą Inspekcję Elementu, możesz również kliknąć element w okienku podglądu, aby podświetlić odpowiedni kod.

Następnie wystarczy dwukrotnie kliknąć kod, aby można go było edytować. Na przykład tutaj zmieniliśmy tytuł naszego bloga:

Możesz także zmienić kolory. Po prostu wybierz element i przewiń panel Style, aby znaleźć odpowiednią sekcję. Możesz kliknąć kolorowe kwadraty, aby wyświetlić próbnik kolorów:

Możesz również bezpośrednio edytować kod szesnastkowy koloru, jeśli znasz ten, którego chcesz użyć.

4. Podgląd zmian obrazu

Inspect Element ułatwia również podgląd zmian obrazu. Jest to również doskonały sposób na wypróbowanie różnych rozmiarów obrazów.

Po prostu wybierz obraz, który chcesz zmienić w panelu podglądu, a następnie kliknij dwukrotnie jego adres URL w panelu HTML:

Następnie możesz wkleić adres URL innego obrazu, aby go przetestować. Jeśli obraz znajduje się w Twojej bibliotece multimediów WordPress, możesz szybko znaleźć adres URL w szczegółach załącznika:

Jest nawet przydatny przycisk do skopiowania adresu URL do schowka. Ponownie pamiętaj, że wszelkie zmiany, które wprowadzasz w inspektorze, są tylko tymczasowe i widoczne tylko dla Ciebie, więc możesz się pobawić.

5. Przetestuj witrynę za pomocą emulacji urządzenia

Kolejną przydatną funkcją Inspect Element jest możliwość emulowania różnych rozmiarów ekranu, a nawet określonych urządzeń. Dzięki temu możesz przetestować responsywność witryny i zobaczyć dokładnie, jak będzie wyglądać z różnymi mobilnymi czynnikami kształtu.

Przy otwartym Inspektorze kliknij ikonę, która wygląda jak ułożony telefon i tablet:

Umożliwia to emulację urządzenia. Pamiętaj, że może być ona domyślnie włączona po otwarciu inspektora. Zmień rozmiar podglądu strony za pomocą uchwytów wokół niego lub kliknij listy rozwijane u góry okienka podglądu, aby wybrać różne urządzenia:

Możesz także wprowadzić określony współczynnik proporcji, a nawet sprawdzić, jak wygląda strona po obróceniu urządzenia mobilnego, klikając ikonę „obróć” u góry okienka podglądu. Aby emulować różne czujniki, takie jak lokalizacja i dotyk, kliknij menu z trzema kropkami w panelu inspektora i wybierz Więcej narzędzi > Czujniki .

Wniosek

Niezależnie od tego, czy jesteś nowicjuszem w tworzeniu stron internetowych, czy doświadczonym profesjonalistą, narzędzie Inspect Element to potężne narzędzie, które zdecydowanie powinno znaleźć się w Twoim arsenale. Jest łatwo dostępny, niemal powszechnie dostępny i sprawia, że ​​różnorodne operacje są szybkie i łatwe.

W tym artykule pokazaliśmy, jak uzyskać dostęp do Inspect Element w Chrome, Firefox i Safari. Pokazaliśmy również, jak go używać do lokalizowania klas CSS, rozwiązywania problemów z witryną, tymczasowej zmiany tekstu i obrazów oraz emulacji urządzeń mobilnych. Dzięki temu zestawowi narzędzi masz wszystko, czego potrzebujesz, aby Inspect Element stał się częścią Twojego przepływu pracy.

Masz pytania dotyczące korzystania z Inspect Element? Daj nam znać w sekcji komentarzy poniżej!

Polecane zdjęcie za pośrednictwem Kinjugraphics / shutterstock.com.