Zobacz kod źródłowy strony internetowej w każdej przeglądarce

Strona internetowa, którą czytasz, składa się, między innymi, z kodu źródłowego. To informacja pobierana przez przeglądarkę i przekłada się na to, co właśnie czytasz.

Większość przeglądarek internetowych umożliwia wyświetlenie kodu źródłowego strony internetowej bez dodatkowego oprogramowania, bez względu na rodzaj używanego urządzenia.

Niektóre oferują nawet zaawansowaną funkcjonalność i strukturę, dzięki czemu łatwiej jest odczytać kod HTML i inny kod programowy na stronie.

Dlaczego chcesz zobaczyć kod źródłowy?

Istnieje kilka powodów, dla których warto wyświetlić kod źródłowy strony. Jeśli jesteś programistą zajmującym się tworzeniem stron internetowych, być może zechcesz rzucić okiem na okładki w innym stylu lub implementacji innego programisty. Być może jesteś w zapewnieniu jakości i próbujesz ustalić, dlaczego pewna część strony internetowej renderuje lub zachowuje się tak, jak jest.

Możesz również być początkującym, próbując nauczyć się kodować własne strony i szukasz przykładów z prawdziwego świata. Oczywiście, możliwe, że nie wpadniesz w żadną z tych kategorii i po prostu chcesz zobaczyć źródło z czystej ciekawości.

Poniżej znajdują się instrukcje, jak wyświetlić kod źródłowy w wybranej przeglądarce.

Google Chrome

Uruchamianie: Chrome OS, Linux, MacOS, Windows

Komputerowa wersja przeglądarki Chrome oferuje trzy różne metody wyświetlania kodu źródłowego strony, pierwsze i najprostsze za pomocą następującego skrótu klawiaturowego: CTRL + U (COMMAND + OPTION + U na MacOS).

Po naciśnięciu ten skrót otwiera nową kartę przeglądarki wyświetlającą kod HTML i inny kod dla aktywnej strony. To źródło jest oznaczone kolorami i ma strukturę, która ułatwia podział i odnajduje to, czego szukasz. Możesz się tam również dostać, wpisując następujący tekst w pasku adresu Chrome, dołączonym po lewej stronie adresu URL strony internetowej i wybierając Wchodzić klawisz: Pokaż źródło: (tj. widok-źródło: https: //www.Go-Travels.com).

Trzecią metodą są narzędzia deweloperskie Chrome, które umożliwiają głębsze zanurzenie się w kodzie strony, a także modyfikowanie jej w locie w celu testowania i programowania. Interfejs narzędzi programistycznych można otwierać i zamykać za pomocą tego skrótu klawiaturowego: CTRL + SHIFT + I (COMMAND + OPCJA + I na MacOS). Możesz także uruchomić je, wykonując następującą ścieżkę.

1. Wybierz przycisk menu głównego Chrome, znajdujący się w prawym górnym rogu i oznaczony trzema pionowo wyrównanymi kropkami.

2. Po wyświetleniu menu rozwijanego umieść kursor myszy nad ikoną Więcej narzędzi opcja.

3. Po wyświetleniu podmenu wybierz Narzędzia deweloperskie.

Android

Wyświetlanie źródła strony internetowej w Chrome na Androida jest tak proste, jak dodanie następującego tekstu na początku jego adresu (lub adresu URL) i przesłanie go: Pokaż źródło:. Przykładem tego byłoby view-source: https: //www.Go-Travels.com . HTML i inne kody z danej strony będą natychmiast wyświetlane w aktywnym oknie.

iOS

Chociaż nie ma natywnych metod przeglądania kodu źródłowego przy użyciu Chrome na iPadzie, iPhonie lub iPodzie touch, najprostszym i najskuteczniejszym rozwiązaniem jest wykorzystanie rozwiązania innej firmy, takiego jak aplikacja View Source.

Dostępny w sklepie App Store w cenie 0,99 USD, program View Source monituje o podanie adresu URL strony (lub skopiowanie / wklejenie z paska adresu Chrome, który jest czasami najprostszą drogą do zrobienia) i to wszystko. Oprócz wyświetlania kodu HTML i innego kodu źródłowego aplikacja ma również karty wyświetlające poszczególne zasoby strony, model obiektu dokumentu (DOM), a także rozmiar strony, pliki cookie i inne interesujące szczegóły.

Microsoft Edge

Działające: Windows

Przeglądarka Edge pozwala przeglądać, analizować, a nawet manipulować bieżącym kodem źródłowym strony za pomocą interfejsu narzędzi programistycznych. Aby uzyskać dostęp do tego przydatnego zestawu narzędzi, możesz użyć jednego z następujących skrótów klawiaturowych: F12 lub CTRL + U. Jeśli wolisz zamiast tego mysz, kliknij przycisk menu Edge (trzy kropki w prawym górnym rogu) i wybierz Narzędzia programistyczne F12 opcja z listy.

Po uruchomieniu narzędzi programistycznych po raz pierwszy, Edge dodaje dwie dodatkowe opcje do menu kontekstowego przeglądarki (dostępnego po kliknięciu prawym przyciskiem myszy w dowolnym miejscu na stronie internetowej): Sprawdź element i Pokaż źródło, ten drugi, który otwiera Debugger część interfejsu narzędzi programistycznych wypełniona kodem źródłowym.

Mozilla Firefox

Działające: Linux, macOS, Windows

Aby wyświetlić kod źródłowy strony w wersji Firefoksa na komputerze, możesz nacisnąć CTRL + U (COMMAND + U na MacOS) na klawiaturze, która otworzy nową zakładkę zawierającą HTML i inny kod dla aktywnej strony internetowej.

Wpisanie następującego tekstu na pasku adresu Firefoksa, bezpośrednio po lewej stronie adresu URL strony, spowoduje wyświetlenie tego samego źródła na bieżącej karcie: Pokaż źródło: ( tzn. view-source: https: //www.dotdash.com ).

Innym sposobem uzyskania dostępu do kodu źródłowego strony są narzędzia dla programistów Firefoksa, dostępne w następujący sposób.

1. Wybierz przycisk menu głównego, znajdujący się w prawym górnym rogu okna przeglądarki i reprezentowany przez trzy poziome linie.

2. Po wyświetleniu menu podręcznego kliknij ikonę Deweloper "Ikona klucza.

3. Menu kontekstowe Web Developer powinno być teraz widoczne. Wybierz Źródło strony opcja.

Firefox pozwala również wyświetlać kod źródłowy dla określonej części strony, co ułatwia wyodrębnienie problemów. Aby to zrobić, najpierw zaznacz obszar, który cię interesuje za pomocą myszy. Następnie kliknij prawym przyciskiem myszy i wybierz Wyświetl źródło wyboru z menu kontekstowego przeglądarki.

Android

Wyświetlanie kodu źródłowego w wersji Firefoksa dla systemu Android można uzyskać, dodając przedrostek adresu URL strony WWW następującym tekstem: Pokaż źródło:. Na przykład, aby wyświetlić źródło HTML dla Dotdash, należy przesłać następujący tekst w pasku adresu przeglądarki: view-source: https: //www.dotdash.com .

iOS

Nasza zalecana metoda przeglądania kodu źródłowego strony na iPadzie, iPhonie lub iPodzie touch odbywa się za pośrednictwem aplikacji View Source, dostępnej w App Store za 0,99 USD. Chociaż nie jest ona zintegrowana bezpośrednio z Firefoksem, możesz z łatwością skopiować i wkleić adres URL z przeglądarki do aplikacji, aby odsłonić kod HTML i inny kod powiązany z daną stroną.

Apple Safari

Działa na iOS i macOS

iOS

Mimo że Safari na iOS nie ma możliwości domyślnego przeglądania źródła strony, przeglądarka integruje się raczej bezproblemowo z aplikacją View Source, dostępną w App Store za 0,99 USD.

Po zainstalowaniu tej aplikacji innej firmy wróć do przeglądarki Safari i dotknij przycisku Udostępnij znajdującego się u dołu ekranu i reprezentowanego przez kwadrat i strzałkę w górę. Arkusz Share iOS powinien być teraz widoczny, nakładając się na dolną połowę okna przeglądarki Safari. Przewiń w prawo i wybierz Pokaż źródło przycisk.

Teraz powinna zostać wyświetlona kolorowa, uporządkowana reprezentacja kodu źródłowego strony aktywnej, wraz z innymi zakładkami, które umożliwiają przeglądanie zasobów strony, skryptów i innych elementów.

System operacyjny Mac

Aby wyświetlić kod źródłowy strony w wersji Safari na komputery, musisz najpierw ją włączyć Rozwijać się menu. Poniższe kroki przeprowadzą Cię przez aktywację tego ukrytego menu i wyświetlenie źródła HTML strony.

1. Wybierz Safari w menu przeglądarki, znajdującym się u góry ekranu.

2. Po wyświetleniu menu rozwijanego wybierz opcję Preferencje opcja.

3. Preferencje Safari powinny być teraz widoczne. Kliknij na zaawansowane ikona znajdująca się po prawej stronie w górnym rzędzie.

4. W dolnej części sekcji Zaawansowane znajduje się opcja oznaczona Pokaż menu rozwijane na pasku menu, wraz z pustym polem wyboru. Zaznacz to pole raz, aby umieścić w nim znacznik wyboru i zamknij okno Preferencje, klikając czerwone "x" znajdujące się w lewym górnym rogu.

5. Wybierz Rozwijać się menu, znajdujące się u góry ekranu.

6. Po wyświetleniu menu rozwijanego wybierz Pokaż źródło strony. Możesz również użyć następującego skrótu klawiaturowego: COMMAND + OPTION + U.

Opera

Działające: Linux, macOS, Windows

Aby wyświetlić kod źródłowy z aktywnej strony internetowej w przeglądarce Opera, użyj następującego skrótu klawiaturowego: CTRL + U (COMMAND + OPTION + U na MacOS). Jeśli wolisz załadować źródło na bieżącej karcie, wpisz następujący tekst po lewej stronie adresu URL strony w pasku adresu i naciśnij Wpisz: view-source: ( tj. widok-źródło: https: //www.Go-Travels.com ).

Wersja Opera na komputery pozwala także na przeglądanie źródeł HTML, CSS i innych elementów za pomocą zintegrowanych narzędzi programistycznych. Aby uruchomić ten interfejs, który domyślnie pojawi się po prawej stronie głównego okna przeglądarki, naciśnij następujący skrót klawiaturowy: CTRL + SHIFT + I (COMMAND + OPCJA + I na MacOS).

Zestaw narzędzi programisty Opera jest również dostępny, wykonując następujące kroki.

1. Wybierz logo Opery znajdujące się w lewym górnym rogu okna przeglądarki.

2. Po wyświetleniu menu rozwijanego umieść kursor myszy nad ikoną Więcej narzędzi opcja.

3. Kliknij Pokaż menu programisty.

4. Wybierz ponownie logo Opery.

5. Gdy pojawi się menu rozwijane, najedź myszą na kursor Deweloper.

6. Po wyświetleniu podmenu wybierz Narzędzia deweloperskie.

Vivaldi

Istnieje wiele sposobów wyświetlania źródła strony w przeglądarce Vivaldi. Najprostszy jest przez CTRL + U skrót klawiaturowy, który przedstawia kod z aktywnej strony w nowej karcie.

Możesz również dodać następujący tekst na początku adresu URL strony, który wyświetla kod źródłowy na obecnej karcie: Pokaż źródło:. Przykładem tego byłoby view-source: http: //www.dotdash.com .

Inną metodą jest zintegrowane narzędzie programistyczne przeglądarki, dostępne po naciśnięciu klawisza CTRL + SHIFT + I połączenie lub poprzez Narzędzia deweloperskie opcja w przeglądarce Przybory menu - znalezione po wybraniu opcji V logo w lewym górnym rogu. Korzystanie z narzędzi programistycznych pozwala na znacznie bardziej dogłębną analizę źródła strony.