Jak wyświetlić kod HTML w przeglądarce Chrome

Łącza urządzeń

• Android
• iPhone'a
• Chromebook
• Prochowiec
• Okna
• Brak urządzenia?

Jesteś ciekaw, z czego składa się strona internetowa? Chcesz wiedzieć, jak zmienić rozmiar lub kolor czcionki w swojej witrynie? Przeglądając kod HTML strony internetowej, możesz zrobić wszystkie te rzeczy i jeszcze więcej.

W tym samouczku pokażemy, jak wyświetlić kod HTML strony internetowej w przeglądarce Chrome.

Wyświetlanie kodu HTML w przeglądarce Chrome

Podczas pisania w formacie HTML kod źródłowy to seria znaczników i atrybutów używanych do definiowania struktury i zawartości strony internetowej.

Kod źródłowy jest odczytywany przez przeglądarki internetowe i tłumaczony na graficzną stronę internetową, którą widzisz na ekranie. Oprócz zdefiniowania wyglądu i stylu strony internetowej, kod źródłowy może być również użyty do dodania interaktywności, takiej jak wyskakujące okienka, formularze i rozwijane menu.

Chociaż przeciętny użytkownik Internetu może nigdy nie potrzebować przeglądać kodu źródłowego HTML strony internetowej, istnieje kilka powodów, dla których niektórzy mogą chcieć to zrobić.

Dla programistów przeglądanie kodu źródłowego może być pomocnym sposobem zrozumienia struktury strony i określenia, które elementy stylów i skryptów są używane. Dla projektantów korzystne może być zobaczenie, jak inni projektanci wykorzystali HTML do stworzenia efektywnych układów.

W niektórych przypadkach użytkownicy mogą również chcieć wyświetlić kod źródłowy, aby rozwiązać problemy lub dowiedzieć się więcej o działaniu określonej witryny lub aplikacji internetowej. Bez względu na przyczynę przeglądanie kodu źródłowego HTML jest stosunkowo prostym procesem w Chrome.

Jak wyświetlić kod HTML strony internetowej w przeglądarce Chrome na komputerze z systemem Windows

System operacyjny Windows jest jednym z najbardziej kompatybilnych systemów Chrome. Chrome jest oparty na otwartym projekcie Chromium, w którym Microsoft jest głównym współtwórcą. Ta kompatybilność rozciąga się na dziedzinę HTML, gdzie popularna przeglądarka pozwala użytkownikom przeglądać kod HTML dowolnej witryny.

Możesz przeglądać kod HTML na dwa sposoby.

Korzystanie z opcji Wyświetl źródło strony

Ta metoda jest prosta:

1. Otwórz Chrome i przejdź do strony, na której chcesz wyświetlić kod źródłowy HTML.
   
2. Kliknij stronę prawym przyciskiem myszy i wybierz Wyświetl źródło strony lub naciśnij Ctrl + U na klawiaturze, aby otworzyć kod źródłowy w nowej karcie.
   

Kod źródłowy pojawi się w nowej karcie i możesz go przewinąć, aby wyświetlić znaczniki HTML dla tej strony.

Korzystanie z narzędzi programistycznych

Aby sprawdzić kod źródłowy strony internetowej za pomocą Narzędzi dla programistów w przeglądarce Google Chrome, wykonaj poniższe czynności.

1. Otwórz Google Chrome i przejdź do strony internetowej, którą chcesz sprawdzić.
   
2. Naciśnij Ctrl + Shift + I na klawiaturze. Okienko Narzędzia dla programistów otworzy się w doku obok przeglądanej strony internetowej.
   
3. Kliknij kartę „Elementy” u góry panelu. Spowoduje to wyświetlenie kodu źródłowego HTML strony internetowej.
   
4. Możesz teraz przejrzeć kod źródłowy strony. Aby zwinąć element, kliknij trójkąt obok nazwy znacznika. Aby wyświetlić więcej informacji o komponencie, kliknij go prawym przyciskiem myszy i wybierz „Sprawdź”.
   

Pamiętaj, że ta metoda jest najlepsza dla stron HTML; możliwe jest przeglądanie kodu źródłowego innych typów stron internetowych, ale formatowanie może być trudniejsze do odczytania.

Jak wyświetlić kod HTML strony internetowej w przeglądarce Chrome na komputerze Mac

Jeśli jesteś programistą internetowym, ważna jest możliwość przeglądania kodu HTML strony internetowej. Pozwala to zobaczyć strukturę strony i rozwiązać wszelkie problemy, które mogą się pojawić. Na szczęście jest to łatwe w Chrome na komputerze Mac. Po prostu wykonaj następujące kroki:

1. Otwórz Chrome i przejdź do strony internetowej, na której chcesz wyświetlić kod HTML.
   
2. Kliknij stronę prawym przyciskiem myszy i wybierz „Sprawdź”.
   
3. U dołu ekranu otworzy się nowe okienko z kodem HTML.
   
4. Możesz także kliknąć określone elementy w kodzie HTML, aby zobaczyć, jak są one stylizowane na stronie. Na przykład możesz zobaczyć, które style CSS są stosowane do elementu, wybierając go, a następnie klikając kartę „Style” w otwartym okienku.
   
5. Aby zamknąć panel, kliknij „X” w prawym górnym rogu.
   

Alternatywnie możesz użyć Narzędzi dla programistów Chrome, aby wyświetlić kod źródłowy.

1. Otwórz Google Chrome i przejdź do strony internetowej, którą chcesz sprawdzić.
   
2. Kliknij ikonę menu (trzy kropki) w prawym górnym rogu przeglądarki i wybierz Więcej narzędzi i Narzędzia programistyczne z menu rozwijanego.
   
3. Panel narzędzi dla programistów otworzy się u dołu ekranu. Wybierz „Elementy” u góry panelu.
   
4. Zobaczysz teraz kod HTML bieżącej strony wyświetlany w panelu Elementy. W razie potrzeby możesz użyć różnych opcji w panelu, aby sprawdzić i debugować kod.
   

Za pomocą zaledwie kilku kliknięć możesz łatwo wyświetlić kod HTML dowolnej strony internetowej w przeglądarce Chrome na komputerze Mac. Może to być pomocne, gdy próbujesz rozwiązać problemy z tworzeniem stron internetowych lub chcesz przyjrzeć się bliżej budowie określonej witryny.

Jak wyświetlić kod HTML strony internetowej w Chrome w aplikacji na iPhone'a

Jeśli używasz iPhone'a, możesz wyświetlić kod HTML dowolnej strony w Chrome na dwa sposoby:

Poprawianie adresu URL

Możesz łatwo wyświetlić kod HTML dowolnej strony, dokonując niewielkiej korekty adresu URL:

1. Otwórz Chrome i przejdź do strony internetowej, której kod HTML chcesz wyświetlić.
   
2. Stuknij raz w pasku adresu, aby zainicjować tryb edycji.
   
3. Przesuń kursor na początek adresu URL.
   
4. Wpisz „View-source”, a następnie naciśnij przycisk „Idź”. Kod HTML strony internetowej zostanie wyświetlony w przeglądarce Chrome.
   

Korzystanie z narzędzi programistycznych

Narzędzia dla programistów Chrome są również dostępne na iOS, ale do ich uruchomienia wymagany jest inny zestaw czynności niż na komputery PC.

1. Stuknij trzy kropki w prawym górnym rogu ekranu i wybierz „Ustawienia”.
2. Przewiń w dół i dotknij „Zaawansowane”, a następnie włącz przełącznik obok „Narzędzia dla programistów”.
3. Stuknij i przytrzymaj pusty obszar strony, a następnie wybierz „Zbadaj element”. Spowoduje to otwarcie panelu bocznego z kodem HTML tej strony.

Jak wyświetlić kod HTML strony internetowej w Chrome w aplikacji na Androida

Podczas korzystania z aplikacji Chrome na telefonie z Androidem możesz chcieć wyświetlić kod HTML strony internetowej. Może to być pomocne, jeśli próbujesz rozwiązać problem ze stroną lub chcesz zobaczyć, jak strona jest zbudowana. Aby wyświetlić kod HTML strony internetowej w przeglądarce Chrome na telefonie z Androidem, wykonaj następujące czynności:

1. Otwórz Chrome na swoim Androidzie.
   
2. Wpisz „view-source:”, a następnie adres URL strony, na której chcesz wyświetlić kod źródłowy. Na przykład, jeśli chcesz wyświetlić kod źródłowy witryny www.google.com, wpisz „view-source:www.google.com” w pasku adresu przeglądarki Chrome.
   

Spowoduje to otwarcie kodu HTML tej strony we wbudowanym interfejsie Narzędzi dla programistów Chrome. Stamtąd możesz przeglądać i edytować kod zgodnie z potrzebami. Pamiętaj, że ta metoda będzie działać tylko wtedy, gdy witryna, którą próbujesz wyświetlić, umożliwia dostęp do swojego kodu źródłowego. Jeśli tak się nie stanie, nie zobaczysz nic poza komunikatem o błędzie.

Jak wyświetlić kod HTML strony internetowej w Chrome na iPadzie

Aplikacja Chrome na iPada ułatwia przeglądanie kodu HTML dowolnej strony internetowej. Po prostu wykonaj następujące kroki:

1. Otwórz Chrome i wpisz „view-source:”, a następnie adres URL strony, którą chcesz wyświetlić. Na przykład, jeśli chcesz wyświetlić kod źródłowy witryny www.alphr.com, musisz wpisać „view-source:www.alphr.com” w pasku adresu przeglądarki Chrome.
   
2. Naciśnij przycisk „Idź”.
   

To powinno załadować kod źródłowy strony na nowej karcie w Chrome. Stamtąd możesz zapisać lub udostępnić kod w razie potrzeby.

Kod źródłowy jest klejem, który łączy strony

HTML to podstawa każdej strony internetowej. Zapewnia strukturę i treść, które odwiedzający widzą, gdy ładują stronę w przeglądarce.

Podczas gdy ostateczny wygląd strony może być określony przez CSS lub inne języki stylów, kod HTML określa podstawową strukturę i zawartość strony. Niektóre zmiany mogą potencjalnie uszkodzić stronę. Z tego powodu ważne jest, aby dobrze rozumieć język HTML podczas przeglądania lub wprowadzania zmian w kodzie źródłowym.

Należy również pamiętać, że chociaż w niektórych przypadkach przeglądanie kodu HTML może być pomocne, zmiany wprowadzone w kodzie nie zostaną odzwierciedlone na aktywnej stronie internetowej. Tylko zmiany opublikowane przez administratora serwisu będą widoczne dla odwiedzających.

Czy próbowałeś wyświetlić kod HTML dowolnej strony internetowej przy użyciu dowolnej z metod omówionych w tym samouczku? Jak poszło?

Daj nam znać w sekcji komentarzy.