W pewnym sensie zadaniem programistów i projektantów stron internetowych jest przekonanie użytkowników, że witryna jest pojedynczą całością, czymś więcej niż tylko serią elementów HTML sformatowanych tak, aby ładnie wyglądały. Jednak dzięki odpowiednim narzędziom, nawet osoby nie będące programistami mogą odsunąć zasłonę na każdej stronie, aby zobaczyć, co tak naprawdę dzieje się za kulisami.
Możesz znać klasyczną sztuczkę „view page source”, która wyświetla surowy HTML strony w oknie przeglądarki. Istnieje jednak lepszy sposób na wykonanie swojej detektywistycznej pracy: Funkcja inspect element pozwala nam zobaczyć, a nawet zmodyfikować front-end dowolnej strony, co może być całkiem przydatne podczas budowania strony lub uczenia się, jak ona działa.
W tym poście wyjaśnię, co to znaczy „inspect” elementy strony i jak to zrobić na trzech popularnych przeglądarkach.
Co oznacza termin „inspect element”?
Inspect element jest funkcją nowoczesnych przeglądarek internetowych, która umożliwia każdemu przeglądanie i edycję kodu źródłowego strony, w tym jej HTML, CSS, JavaScript i plików multimedialnych. Kiedy kod źródłowy jest modyfikowany za pomocą narzędzia inspect, zmiany są wyświetlane na żywo w oknie przeglądarki.
Inspect to tajna broń profesjonalistów internetowych. Programiści, projektanci i marketerzy często używają go do zaglądania do wnętrza dowolnej witryny (w tym własnej), aby wyświetlić podgląd zmian treści i stylu, naprawić błędy lub dowiedzieć się, jak dana witryna jest zbudowana. Na przykład, jeśli znajdziesz intrygujący interfejs na konkurencyjnej stronie, element inspect pozwoli ci zobaczyć HTML i CSS, które go tworzą.
Możesz też myśleć o funkcji inspect w przeglądarce jako o swego rodzaju „piaskownicy”: Baw się stroną tak bardzo, jak tylko chcesz – zmieniaj treść, kolory, czcionki, układy itp. Kiedy skończysz, po prostu odśwież stronę, aby przywrócić wszystko do normy. Inspect nie zmienia samej strony – tylko to, jak pojawia się ona w twojej przeglądarce – więc nie krępuj się eksperymentować!
Inspect jest również niezwykle cennym narzędziem dla osób uczących się tworzenia stron internetowych. Zamiast przeglądać zwykły kod źródłowy, użyj elementu inspect, aby wejść w interakcję ze stroną i zobaczyć, jak każda linia kodu mapuje się do elementu lub stylu. Dzięki lepszemu zrozumieniu, co składa się na typową stronę internetową, możesz efektywnie komunikować się z programistami w przypadku błędu lub jeśli chcesz coś zmienić.
Inspect może być „narzędziem deweloperskim”, ale nie musisz pisać żadnego kodu ani instalować dodatkowego oprogramowania, aby go używać. Wszystko, co opisałem, możesz zrobić wewnątrz swojej przeglądarki – dowiedzmy się, jak.
Jak sprawdzać elementy
Każda nowoczesna przeglądarka ma natywne narzędzie do sprawdzania elementów. Tutaj wyjaśnię, jak używać narzędzia inspect w trzech przeglądarkach: Google Chrome, Safari firmy Apple i Mozilla Firefox.
Jak sprawdzać elementy w Chrome
Aby użyć inspektora w Google Chrome, najpierw przejdź do dowolnej strony internetowej (w tych przykładach będę używał HubSpot.com). Możesz otworzyć narzędzie na kilka sposobów:
- Kliknij prawym przyciskiem myszy dowolną część strony i wybierz polecenie Inspect. Kliknięcie prawym przyciskiem myszy określonego elementu strony spowoduje otwarcie tego elementu w widoku inspektora.
- W górnym pasku menu wybierz Widok > Deweloper > Narzędzia dla deweloperów.
- Otwórz Dostosuj i kontroluj Google Chrome, klikając ikonę z trzema kropkami w prawym górnym rogu okna przeglądarki. Stamtąd wybierz Więcej narzędzi > Narzędzia dla programistów.
- Użyj skrótu klawiszowego control-shift-C w Windows lub command-option-C w macOS.
Panel Narzędzia dla programistów Chrome otworzy się na dole okna przeglądarki. Jeśli chcesz zmienić położenie panelu, kliknij ikonę trzech kropek w prawym górnym rogu panelu (obok ikony X), a następnie wybierz preferowaną pozycję dokowania. Ja wybiorę Dock to right – to ułatwia przeglądanie renderowanej strony i jej źródła:
Wzdłuż górnej części panelu inspect zobaczysz zakładki Elements, Console, Sources, itd. Są to narzędzia, których możemy użyć do oceny zawartości strony i jej wydajności. Jednak wszystko, czego potrzebujemy do inspekcji, znajduje się w zakładce Elementy.
Następnym obszarem w dół jest źródło HTML bieżącej strony. Poświęć trochę czasu na zbadanie tego obszaru i zauważ, jak najechanie kursorem na fragment kodu podświetla odpowiadający mu element na stronie. Kolor niebieski oznacza zawartość elementu, zielony odpowiada wypełnieniu, a obszary w kolorze pomarańczowym to marginesy.
Możemy również zrobić coś odwrotnego – zlokalizować fragment kodu z elementu strony. Aby to zrobić, kliknij ikonę wyboru elementu w lewym górnym rogu panelu:
Następnie kliknij element strony. Zobaczysz kod źródłowy ujawniony w panelu inspect.
Poza przeglądaniem, możemy użyć inspect do zmiany zawartości strony. Zacznijmy od zamiany tekstu. Najpierw znajdź w kodzie źródłowym jakiś tekst. Następnie kliknij prawym przyciskiem myszy element i wybierz polecenie Edytuj tekst – otworzy to inline’owe wejście tekstowe, w którym możesz napisać, co tylko chcesz. Kiedy odznaczysz pole tekstowe, zobaczysz, że zmiany nabierają mocy:
A co powiesz na brak tekstu? Po prostu wybierz element w kodzie źródłowym i usuń go. Element H1 zniknie ze strony.
Nie martw się jednak – pojawi się on ponownie, gdy odświeżysz stronę. Możesz również ukryć dowolny element bez usuwania go, klikając prawym przyciskiem myszy na element w kodzie źródłowym i wybierając opcję Ukryj element.
Możesz nawet dodać nowe elementy strony – kliknij prawym przyciskiem myszy na element w kodzie źródłowym i wybierz opcję Edytuj jako HTML. Zobaczysz pole tekstowe, w którym możesz wkleić kod HTML. Na przykład:
Przesuwając się w dół panelu inspekcji Chrome, widzimy zakładkę Style. Pokazuje nam ona, jakie stylizacje CSS zostały zastosowane do wybranego elementu. Klikamy na linie kodu, aby je przepisać, lub aktywujemy/deaktywujemy pewne deklaracje, zaznaczając/odznaczając pola obok nich. Zróbmy to dla właściwości font-weight naszego elementu <h1>:
Na koniec omówmy jeszcze jedną cechę funkcji inspect w Chrome – widok mobilny. Tworząc witrynę, projektanci muszą brać pod uwagę to, jak jej strony wyglądają na ekranach komputerów stacjonarnych, telefonów komórkowych i tabletów. Na szczęście Chrome pozwala wyświetlić podgląd tej samej strony w wielu rozdzielczościach ekranu. Zacznij od kliknięcia ikony Przełącz urządzenie w lewym górnym rogu panelu:
W tym miejscu ustaw rozdzielczość ekranu ręcznie lub wybierz z menu predefiniowane ustawienie urządzenia, a następnie sprawdź, jak reaguje układ strony. Możesz także obrócić ekran, a nawet wyświetlić podgląd wydajności przy prędkościach „mid-tier mobile” i „low-tier mobile”.
How To Inspect Elements in Safari
Aby skorzystać z narzędzia inspekcji w Safari, Web Inspector, musimy najpierw włączyć narzędzia deweloperskie Safari. Wybierz Safari > Preferencje. W oknie preferencji, w sekcji Zaawansowane, zaznacz pole obok opcji Pokaż menu Rozwijanie na pasku menu. Do powyższego menu zostanie dodana opcja Rozwijaj.
Następnie przejdź do wybranej strony internetowej. Istnieją trzy sposoby, aby otworzyć Inspektora WWW:
- Kliknij prawym przyciskiem myszy dowolną część strony i wybierz polecenie Inspect Element. Kliknięcie prawym przyciskiem myszy określonego elementu strony spowoduje otwarcie tego elementu w widoku inspektora.
- Wybierz polecenie Rozwiń > Pokaż inspektora WWW z górnego paska menu.
- Użyj skrótu klawiszowego command-option-I.
Inspektor Safari domyślnie otwiera się na dole okna. Aby zmienić tę konfigurację, kliknij ikonę umożliwiającą zadokowanie go po prawej stronie lub wyskoczenie w osobnym oknie – obie znajdują się obok ikony X w lewym górnym rogu ekranu.
Panel inspektora w Safari składa się z dwóch kolumn. Pierwsza z nich pokazuje źródłowy HTML, a druga CSS strony. Użyj kursora, aby zbadać źródłowy HTML i zobaczyć, które linie kodu odpowiadają poszczególnym regionom strony (niebieskie podświetlają zawartość, zielone podświetlają wypełnienia, a pomarańczowe marginesy):
Możemy też sprawdzić stronę bezpośrednio. Klikamy ikonę zaznaczania elementów u góry panelu:
Teraz, gdy klikniemy element strony, Inspektor WWW ujawnia odpowiadający mu kod źródłowy.
Podobnie jak Inspektor Chrome, Safari pozwala modyfikować, dodawać i usuwać elementy strony. Aby edytować stronę, kliknij prawym przyciskiem myszy element HTML w panelu inspektora, a następnie wybierz opcję z menu Edycja. Inspektor wyświetli monit o wprowadzenie nowego tekstu, a następnie wyświetli zmiany w czasie rzeczywistym:
Albo dodaj nowy element do strony, klikając prawym przyciskiem myszy linię kodu i wybierając opcję z menu Dodaj. W tym przykładzie dodałem nowy element dziecięcy <h1> do istniejącego elementu <div>:
Jeśli chcesz usunąć element strony, po prostu zaznacz jakiś kod i usuń go. Możesz też kliknąć prawym przyciskiem myszy i wybrać opcję Przełącz widoczność, aby ukryć element bez usuwania go.
Po prawej stronie mamy kolumnę Style, w której możemy zmieniać lub aktywować/dezaktywować deklaracje CSS dla dowolnego elementu, jak na przykład:
Podczas testowania zmian treści i stylów będziesz chciał zobaczyć ich efekt zarówno na ekranach urządzeń przenośnych, jak i na komputerach stacjonarnych. Tryb Responsive Design w Safari umożliwia podgląd witryny na typowych urządzeniach.
Aby z niego skorzystać, wybierz polecenie Rozwiń > Wprowadź tryb Responsive Design. W tym trybie można korzystać z tych samych narzędzi inspektora na stronach sformatowanych dla urządzeń Apple lub samodzielnie ustawić wymiary:
Jak sprawdzać elementy w Firefoksie
Aby otworzyć inspektora Firefoksa, możesz:
- Kliknąć prawym przyciskiem myszy dowolną część strony i wybrać polecenie Inspect Element. Kliknięcie prawym przyciskiem myszy określonego elementu strony otworzy ten element w widoku inspektora.
- Wybierz Narzędzia > Deweloper sieciowy > Inspektor z górnego paska menu.
- Użyj skrótu klawiszowego control-shift-C w Windows lub command-option-C w macOS.
Inspektor Firefoksa domyślnie pojawia się na dole okna. Aby zmienić jego położenie, wybierz ikonę trzech kropek w prawym górnym rogu inspektora, a następnie wybierz alternatywną opcję wyświetlania.
Panel inspektora w Firefoksie jest porównywalny pod względem funkcji do panelu inspektora w Chrome i Safari. Kod źródłowy HTML wskazuje odpowiedni element strony za pomocą kodów kolorystycznych – treść jest niebieska, padding jest fioletowy, a marginesy są żółte:
Plus, można znaleźć kod, zaznaczając elementy na stronie – aby przejść do trybu zaznaczania, należy kliknąć ikonę kursora w lewym górnym rogu:
Kliknij dowolny element strony, aby ujawnić jego źródło w panelu inspect.
Aby zmodyfikować lub usunąć element strony, zaznacz jego kod w inspektorze. Następnie kliknij dwukrotnie, aby zmienić tekst, lub kliknij prawym przyciskiem myszy i wybierz polecenie Edytuj jako HTML lub Utwórz nowy węzeł, aby dodać kod. Możesz też po prostu usunąć kod i zobaczyć zmiany na stronie.
Aby przełączyć stylizację elementu, użyj regionu Filter Styles na dole panelu inspect. Odznacz pole obok deklaracji CSS, aby ją dezaktywować (lub wpisz nowy kod samodzielnie):
Na koniec, narzędzia Firefoksa mają też opcję podglądu mobilnego. Aby z niej skorzystać, kliknij ikonę trybu responsywnego w prawym górnym rogu panelu:
Tryb responsywny pozwala wybrać jedną z kilku predefiniowanych rozdzielczości ekranu lub ustawić własną, można też przełączać szybkość połączenia i współczynnik pikseli urządzenia:
Poznaj bliżej narzędzie inspect
Kiedy poznasz podstawy narzędzia inspect twojej przeglądarki, możesz zdać sobie sprawę, jak wiele informacji o twoich ulubionych stronach jest publicznie dostępnych. Za pomocą kilku kliknięć możesz sprawdzić, jak dokładnie zbudowane są strony, jakich stylów używają, jak optymalizują się pod kątem wyszukiwarek, jak formatują się na ekranach urządzeń przenośnych i wiele więcej.
Dla niektórych inspect jest po prostu zabawną ciekawostką. Dla innych, jest to kluczowy atut do nauki, jak działają inne konkurencyjne strony. Kimkolwiek jesteś, jest to świetna umiejętność, którą warto posiadać i która może zapewnić wgląd w coś więcej niż tylko oglądanie samej strony internetowej.
