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

Łącza urządzeń

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.

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

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.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  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.
    Jak wyświetlić kod HTML w przeglądarce Chrome

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ć.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  2. Naciśnij Ctrl + Shift + I na klawiaturze. Okienko Narzędzia dla programistów otworzy się w doku obok przeglądanej strony internetowej.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  3. Kliknij kartę „Elementy” u góry panelu. Spowoduje to wyświetlenie kodu źródłowego HTML strony internetowej.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  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ź”.
    Jak wyświetlić kod HTML w przeglądarce Chrome

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.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  2. Kliknij stronę prawym przyciskiem myszy i wybierz „Sprawdź”.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  3. U dołu ekranu otworzy się nowe okienko z kodem HTML.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  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.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  5. Aby zamknąć panel, kliknij „X” w prawym górnym rogu.
    Jak wyświetlić kod HTML w przeglądarce Chrome

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ć.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  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.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  3. Panel narzędzi dla programistów otworzy się u dołu ekranu. Wybierz „Elementy” u góry panelu.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  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.
    Jak wyświetlić kod HTML w przeglądarce Chrome

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ć.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  2. Stuknij raz w pasku adresu, aby zainicjować tryb edycji.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  3. Przesuń kursor na początek adresu URL.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  4. Wpisz „View-source”, a następnie naciśnij przycisk „Idź”. Kod HTML strony internetowej zostanie wyświetlony w przeglądarce Chrome.
    Jak wyświetlić kod HTML 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.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  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.
    Jak wyświetlić kod HTML w przeglądarce 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.
    Jak wyświetlić kod HTML w przeglądarce Chrome
  2. Naciśnij przycisk „Idź”.
    Jak wyświetlić kod HTML w przeglądarce Chrome

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.

Sign up and earn $1000 a day ⋙

Jak naprawić błąd polegający na braku możliwości zainstalowania oprogramowania w systemie Windows

Jak naprawić błąd polegający na braku możliwości zainstalowania oprogramowania w systemie Windows

Jak naprawić błąd polegający na braku możliwości zainstalowania oprogramowania w systemie Windows. Dlaczego nie można zainstalować aplikacji lub oprogramowania w systemie Windows 10/11? Oto wszystko, co musisz wiedzieć, jak to naprawić

Instrukcje usuwania lub zmiany PIN-u w systemie Windows 11

Instrukcje usuwania lub zmiany PIN-u w systemie Windows 11

Instrukcja usuwania lub zmiany kodu PIN w systemie Windows 11, W systemie Windows 11 kod PIN jest bardzo przydatnym i wygodnym narzędziem bezpieczeństwa dla użytkowników. Jednak niektórzy ludzie

Jak naprawić błąd Obecnie nie ma dostępnych opcji zasilania w systemie Windows 10

Jak naprawić błąd Obecnie nie ma dostępnych opcji zasilania w systemie Windows 10

Jak naprawić błąd Obecnie nie ma dostępnych opcji zasilania w systemie Windows 10. Nie można wybrać trybu zasilania w systemie Windows 10. Co powinienem zrobić? Oto jak naprawić błąd

Najprostszy sposób na naprawienie błędów aplikacji Zdjęcia w systemie Windows 10

Najprostszy sposób na naprawienie błędów aplikacji Zdjęcia w systemie Windows 10

Najprostszy sposób naprawienia błędów aplikacji Zdjęcia w systemie Windows 10. Co powinienem zrobić, jeśli Zdjęcia Microsoft nie działają? Nie martw się o sposoby naprawienia błędów aplikacji Zdjęcia w systemie Windows

Instrukcje instalowania skrótów klawiaturowych w celu zmiany języków wprowadzania w systemie Windows 11

Instrukcje instalowania skrótów klawiaturowych w celu zmiany języków wprowadzania w systemie Windows 11

Instrukcje instalowania skrótów do przełączania języków wprowadzania w systemie Windows 11. Podczas korzystania z systemu Windows użytkownicy często będą musieli przełączać się między metodami.

Jak sprawdzić obsługiwany stan zasilania w systemie Windows 11

Jak sprawdzić obsługiwany stan zasilania w systemie Windows 11

Sposób sprawdzania stanu zasilania jest obsługiwany w systemie Windows 11. System Windows 11 może obsługiwać wiele różnych stanów zasilania. Oto jak sprawdzić stan zasilania

Jak przełączyć się z 2,4 GHz na 5 GHz w systemie Windows 10

Jak przełączyć się z 2,4 GHz na 5 GHz w systemie Windows 10

Jak przełączyć się z 2,4 GHz na 5 GHz w systemie Windows 10 Jeśli chcesz znaleźć szybki i prosty sposób na przyspieszenie Internetu, pomocna może być zmiana pasma Wi-Fi z 2,4 GHz na 5 GHz.

Jak naprawić błąd Za mało pamięci do uruchomienia programu Microsoft Excel w systemie Windows

Jak naprawić błąd Za mało pamięci do uruchomienia programu Microsoft Excel w systemie Windows

Jak naprawić błąd Za mało pamięci do uruchomienia programu Microsoft Excel w systemie Windows. Czy pojawia się błąd dotyczący braku wystarczającej ilości pamięci do uruchomienia programu Microsoft Excel? Jak więc naprawić błąd Za mało pamięci

Sposoby wyszukiwania wszystkich plików wideo w systemie Windows

Sposoby wyszukiwania wszystkich plików wideo w systemie Windows

Sposoby wyszukiwania wszystkich plików wideo w systemie Windows. Nie można znaleźć nagranych i zapisanych filmów na komputerze. Poniżej znajdują się sposoby, które pomogą Ci znaleźć wszystkie klipy w systemie Windows.

Jak naprawić błąd 0xa00f4288 w aplikacji Aparat w systemie Windows 10 i 11

Jak naprawić błąd 0xa00f4288 w aplikacji Aparat w systemie Windows 10 i 11

Jak naprawić błąd 0xa00f4288 w aplikacji Aparat w systemie Windows 10 i 11. Domyślna aplikacja Aparat w systemie Windows to główne narzędzie do robienia zdjęć. Tak jest w przypadku kamer Win 10 i 11

Jak otworzyć wiele programów za pomocą jednego skrótu w systemie Windows 10

Jak otworzyć wiele programów za pomocą jednego skrótu w systemie Windows 10

Jak otworzyć wiele programów za pomocą jednego skrótu w systemie Windows 10, w rzeczywistości możesz otwierać wiele programów jednocześnie za pomocą jednego klawisza. Oto jak z niego korzystać

Jak usunąć stare opcje menu rozruchu w systemie Windows

Jak usunąć stare opcje menu rozruchu w systemie Windows

Jak usunąć stare opcje menu rozruchu w systemie Windows, podwójny rozruch systemu Windows 10 jest przydatny, ale może pozostawić w menu zbędne opcje rozruchu. Oto jak usunąć menu

Instrukcje naprawiania błędów narzędzia Snipping Tool w systemie Windows 11

Instrukcje naprawiania błędów narzędzia Snipping Tool w systemie Windows 11

Instrukcje naprawiania błędów narzędzia Snipping Tool w systemie Windows 11. Windows 11 został oficjalnie wydany już jakiś czas temu, ale podczas użytkowania nadal występuje wiele błędów

Instrukcje dotyczące głosowego wprowadzania tekstu w systemie Windows 11

Instrukcje dotyczące głosowego wprowadzania tekstu w systemie Windows 11

Instrukcje dotyczące głosowego wprowadzania tekstu w systemie Windows 11. Głosowe wprowadzanie tekstu w systemie Windows 11 pomaga znacznie poprawić wydajność pracy. Oto jak

Jak włączyć/wyłączyć Sticky Key w systemie Windows 11

Jak włączyć/wyłączyć Sticky Key w systemie Windows 11

Jak włączyć/wyłączyć Sticky Key w systemie Windows 11, Sticky Key ułatwia korzystanie z klawiatury komputera. Oto jak włączyć i wyłączyć Sticky Key w systemie Windows 11.

Co to jest Instalator modułów systemu Windows?

Co to jest Instalator modułów systemu Windows?

Co to jest Instalator modułów systemu Windows? Instalator modułów systemu Windows czasami zajmuje dużo zasobów systemowych. Czy Instalator modułów systemu Windows jest ważny, czy nie?

Jak zwiększyć głośność w systemie Windows 10

Jak zwiększyć głośność w systemie Windows 10

Jak zwiększyć głośność w Windows 10, Jak zwiększyć głośność komputera do maksymalnego poziomu? Nauczmy się z WebTech360, jak zwiększyć głośność komputera z systemem Windows 10

Jak użyć Asystenta instalacji systemu Windows 11 do zainstalowania systemu Windows 11

Jak użyć Asystenta instalacji systemu Windows 11 do zainstalowania systemu Windows 11

Jak używać Asystenta instalacji systemu Windows 11 do instalacji systemu Windows 11, Asystent instalacji systemu Windows 11 to jeden z najlepszych sposobów uaktualnienia komputera do systemu Windows 11.

Jak wyłączyć dźwięk uruchamiania w systemie Windows 11

Jak wyłączyć dźwięk uruchamiania w systemie Windows 11

Jak wyłączyć dźwięk uruchamiania komputera w systemie Windows 11. Czy dźwięk uruchamiania komputera Ci przeszkadza? Następnie zapoznaj się z poniższym opisem wyłączania dźwięku uruchamiania komputera z systemem Windows 11

Instrukcje zmiany limitu czasu blokady ekranu w systemie Windows 11

Instrukcje zmiany limitu czasu blokady ekranu w systemie Windows 11

Instrukcje dotyczące zmiany limitu czasu blokady ekranu w systemie Windows 11. Podczas korzystania z systemu Windows 11 zdarza się, że użytkownicy muszą na jakiś czas odejść od komputera.