Główny Chrom Jak wyświetlić źródło HTML w przeglądarce Google Chrome

Jak wyświetlić źródło HTML w przeglądarce Google Chrome



Co wiedzieć

  • Kliknij stronę internetową prawym przyciskiem myszy i wybierz Zobacz stronę źródłową .
  • Skrót: naciśnij klawisz kontrolny + W (komputer z systemem Windows) lub Komenda + Opcja + W (Prochowiec).
  • Aby skorzystać z narzędzi programistycznych Chrome, wybierz Menu (trzy kropki) > Więcej narzędzi > Narzędzia deweloperskie .

W tym artykule wyjaśniono, jak uzyskać dostęp do kodu źródłowego HTML witryny internetowej w przeglądarce Google Chrome, a także uzyskać dostęp do narzędzi programistycznych Chrome i z nich korzystać. Przeglądanie kodu źródłowego witryny to doskonały sposób na naukę HTML dla początkujących.

Wyświetl kod źródłowy w przeglądarce Chrome

Jak zatem przeglądać kod źródłowy strony internetowej? Oto instrukcje krok po kroku, jak to zrobić za pomocą przeglądarki Google Chrome.

  1. Otworzyć Przeglądarka internetowa Google Chrome (Jeśli nie masz Zainstalowana przeglądarka Google Chrome , To jest darmowe pobranie).

  2. Przejdź do stronę internetową, którą chcesz sprawdzić .

  3. Kliknij prawym przyciskiem myszy Strona i spójrz na menu, które się pojawi. Z tego menu kliknij Zobacz stronę źródłową .

    Wyświetl źródło strony w menu kontekstowym przeglądarki Chrome
  4. Kod źródłowy tej strony pojawi się teraz jako nowa karta w przeglądarce.

  5. Alternatywnie możesz także użyć skrótów klawiaturowych klawisz kontrolny + W na komputerze PC, aby otworzyć okno z wyświetlonym kodem źródłowym witryny. Na komputerze Mac ten skrót to Komenda + Opcja + W .

Hilary Allison / Lifewire

jak upewnić się, że wszystkie sterowniki są aktualne

Skorzystaj z Narzędzi dla programistów Chrome

Oprócz prostychZobacz stronę źródłowąmożliwości, jakie oferuje Google Chrome, możesz także skorzystać z ich doskonałych funkcji Narzędzia deweloperskie aby zagłębić się w witrynę. Narzędzia te pozwolą Ci nie tylko zobaczyć kod HTML, ale także CSS, który ma zastosowanie do elementów widoku w tym dokumencie HTML.

Aby skorzystać z narzędzi programistycznych Chrome:

  1. otwarty GoogleChrome .

  2. Nawigować do stronę internetową, którą chcesz sprawdzić .

  3. Wybierz menu z trzema kropkami w prawym górnym rogu okna przeglądarki.

  4. W menu najedź kursorem Więcej narzędzi a następnie wybierz Narzędzia deweloperskie w wyświetlonym menu.

    Element menu narzędzi programistycznych w przeglądarce Google Chrome
  5. Otworzy się okno pokazujące kod źródłowy HTML po lewej stronie panelu i powiązany CSS po prawej.

  6. Alternatywnie, jeśli klikniesz prawym przyciskiem myszy element strony internetowej i wybierz Sprawdzać z menu, które się pojawi, pojawią się narzędzia programistyczne Chrome i podświetlą wybraną część kodu HTML z odpowiednim CSS pokazanym po prawej stronie. Jest to bardzo pomocne, jeśli chcesz dowiedzieć się więcej o konkretnym fragmencie witryny.

    jak stworzyć serwer lan na odwróconym
Jak sprawdzić element na komputerze Mac

Czy przeglądanie kodu źródłowego jest legalne?

Przez lata wielu nowych projektantów stron internetowych zadawało sobie pytanie, czy dopuszczalne jest przeglądanie kodu źródłowego witryny i wykorzystywanie go do celów edukacyjnych, a ostatecznie do wykonywanej przez nich pracy. Chociaż hurtowe kopiowanie kodu witryny i podawanie go jako własnego w witrynie internetowej jest z pewnością niedopuszczalne, używanie tego kodu jako odskoczni do nauki pokazuje, jak wiele postępów poczyniono w tej branży.

Jak wspomnieliśmy na początku tego artykułu, trudno byłoby dziś znaleźć pracującego specjalistę internetowego, który nie nauczyłby się czegoś, przeglądając źródła witryny! Tak, przeglądanie kodu źródłowego witryny jest legalne. Używanie tego kodu jako zasobu do zbudowania czegoś podobnego jest również bezpieczne. Biorąc kod w niezmienionej postaci i przekazując go jako swoją pracę, zaczynasz napotykać problemy.

W końcu profesjonaliści zajmujący się internetem uczą się od siebie nawzajem i często udoskonalają prace, które widzą i którymi się inspirują, dlatego nie wahaj się zapoznać z kodem źródłowym witryny i wykorzystać go jako narzędzie do nauki.

Więcej niż tylko HTML

Należy pamiętać, że pliki źródłowe mogą być bardzo skomplikowane (a im bardziej złożona jest przeglądana witryna, tym bardziej skomplikowany może być jej kod). Oprócz struktury HTML, z której składa się strona, dostępne będą również CSS (kaskadowe arkusze stylów), które określają wygląd witryny. Ponadto wiele współczesnych witryn internetowych zawiera pliki skryptów wraz z kodem HTML.

Prawdopodobnie będzie dołączonych wiele plików skryptów; w rzeczywistości każdy z nich obsługuje inne aspekty witryny. Szczerze mówiąc, kod źródłowy witryny może wydawać się przytłaczający, zwłaszcza jeśli dopiero zaczynasz to robić. Nie denerwuj się, jeśli nie możesz od razu dowiedzieć się, co się dzieje z daną witryną. Wyświetlenie źródła HTML to dopiero pierwszy krok w tym procesie. Przy odrobinie doświadczenia zaczniesz lepiej rozumieć, jak wszystkie te elementy pasują do siebie, tworząc stronę internetową, którą widzisz w przeglądarce. Gdy lepiej zaznajomisz się z kodem, będziesz mógł dowiedzieć się z niego więcej i nie będzie ci się to wydawać takie trudne.

Często zadawane pytania
  • Jak edytować kod HTML w przeglądarce Chrome?

    Otwórz Narzędzia programistyczne w przeglądarce Chrome, naciskając klawisz kontrolny (Lub Komenda na komputerze Mac) + Shift + I . Stamtąd naciśnij klawisz kontrolny ( Komenda na Macu) + O i wybierz zapisany plik źródłowy, który chcesz edytować, aby go otworzyć.

  • Jak wyświetlić kod źródłowy strony w przeglądarce Chrome, jeśli opcja Wyświetl źródło jest wyłączona?

    Jeśli witryna internetowa wyłączyła opcję Wyświetl źródło, nadal możesz zajrzeć pod maskę. W górnej części okna przeglądarki wybierz Pogląd > Deweloper > Pokaż źródło , co powinno wyświetlić kod źródłowy strony internetowej.

  • Jak wyświetlić kod źródłowy witryny w przeglądarce Chrome na urządzeniu z Androidem?

    Przejdź do witryny, którą chcesz wyświetlić, korzystając z aplikacji Chrome na swoim urządzeniu, a następnie wybierz pasek adresu przeglądarki. Przesuń kursor tekstowy maksymalnie w lewo — przed adresem URL — i wpisz Pokaż źródło , następnie naciśnij Wchodzić lub wybierz Iść .

    jak zrobić kolaż na iPhonie

Ciekawe Artykuły

Wybór Redakcji

Jak sprawdzić, czy ktoś inny korzysta z Twojego konta G-Mail
Jak sprawdzić, czy ktoś inny korzysta z Twojego konta G-Mail
Konto G-Mail sprawia, że ​​wiele rzeczy, które robisz online jest szybsze, bardziej płynne i wydajniejsze. Na przykład automatycznie otrzymujesz też konto Google. Oznacza to, że rejestracja w innych witrynach lub usługach staje się łatwa. Jest to
Hollow Knight: Jak uzyskać podwójny skok
Hollow Knight: Jak uzyskać podwójny skok
Możliwe jest ukończenie kampanii Hollow Knight bez umiejętności podwójnego skoku. Mimo to, ponieważ gra należy do gatunku Metroidvania, poszukiwanie Skrzydeł Monarch, które zapewniają tymczasowy lot, a dokładniej podwójne skoki, jest
Jak uzyskać weryfikację na Snapchacie
Jak uzyskać weryfikację na Snapchacie
Weryfikacja na Snapchacie oznacza, że ​​jesteś wielką sprawą na platformie. Po weryfikacji obok Twojego imienia pojawi się złota gwiazdka. Możesz użyć tego niesamowitego dodatku do reklamowania swojej firmy lub marki. Ale
Zobacz nazwy i wartości zmiennych środowiskowych dla procesu w systemie Windows 10
Zobacz nazwy i wartości zmiennych środowiskowych dla procesu w systemie Windows 10
Zmienne środowiskowe w systemie operacyjnym to wartości zawierające informacje o środowisku systemu i aktualnie zalogowanym użytkowniku. Istniały także w systemach operacyjnych przed Windows, takich jak MS-DOS. Aplikacje lub usługi mogą wykorzystywać informacje zdefiniowane przez zmienne środowiskowe do określania różnych rzeczy dotyczących systemu operacyjnego, na przykład do wykrywania
Jak kliknąć prawym przyciskiem myszy na laptopie
Jak kliknąć prawym przyciskiem myszy na laptopie
Możesz kliknąć laptopa prawym przyciskiem myszy, nawet jeśli nie używasz myszy. Oto jak to zrobić na klawiaturze i touchpadzie w systemie macOS i Windows.
Recenzja Dell Latitude E7240
Recenzja Dell Latitude E7240
Firma Dell ogłosiła niedawno nową parę ultrabooków Latitude z serii 7000, a Latitude E7240 jest pierwszym modelem, który trafił do PC Pro Labs. . Podążając za przyjaznymi dla biznesu śladami swoich poprzedników, firma Dell spakowała notebook Latitude
Jak skalibrować kontroler PS lub Xbox w systemie Windows 10
Jak skalibrować kontroler PS lub Xbox w systemie Windows 10
Wszyscy gracze wiedzą, jak ważna jest konserwacja sprzętu, w tym sprawdzanie, czy kontrolery są w idealnym stanie. Niektóre problemy mogą często zepsuć celowanie, a nawet ruch, ponieważ strzelanki rywalizujące wymagają najbardziej precyzyjnych działań.