Skip to main content

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

Wybór podpowiedzi z listy - Typeahead #2 (Czerwiec 2026)

Wybór podpowiedzi z listy - Typeahead #2 (Czerwiec 2026)
Anonim

Niezależnie od tego, czy jesteś nowicjuszem w branży internetowej, czy doświadczonym weteranem, wyświetlenie źródła HTML różnych stron internetowych jest czymś, co możesz zrobić wiele razy w ciągu swojej kariery.

Dla tych, którzy dopiero zaczynają projektowanie stron internetowych, przeglądanie kodu źródłowego witryny jest jednym z najprostszych sposobów sprawdzenia, jak pewne rzeczy są wykonywane, abyś mógł uczyć się z tej pracy i zacząć używać pewnych kodów lub technik w swojej pracy. Jak każdy projektant stron internetowych, który działa dzisiaj, zwłaszcza ci, którzy byli w tym od samego początku branży i jest to bezpieczny zakład, że dzięki niemu nauczyli się HTML, po prostu oglądając źródło stron internetowych, które widzieli i byli zaintrygowani. przez. Oprócz czytania książek poświęconych projektowaniu stron internetowych lub uczęszczania na profesjonalne konferencje, przeglądanie kodu źródłowego witryny jest świetnym sposobem dla początkujących na naukę HTML.

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 strona internetowa, tym bardziej złożony jest kod witryny). Oprócz struktury HTML, która tworzy stronę, którą przeglądasz, pojawią się również CSS (kaskadowe arkusze stylów), które decydują o wizualnym wyglądzie tej witryny. Ponadto wiele stron internetowych będzie zawierać pliki skryptów dołączone wraz z kodem HTML.

Prawdopodobnie istnieje wiele plików skryptów, z których każdy zasila różne aspekty witryny. Szczerze mówiąc, kod źródłowy witryny może wydawać się przytłaczający, szczególnie jeśli nie masz na to ochoty. Nie denerwuj się, jeśli nie możesz natychmiast dowiedzieć się, co się dzieje z tą witryną. Wyświetlanie źródła HTML to tylko 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 zapoznasz się z tym kodem, będziesz mógł dowiedzieć się więcej na jego temat i nie będzie to dla ciebie trudne.

Jak więc wyświetlić kod źródłowy witryny? Oto instrukcje krok po kroku, aby to zrobić za pomocą przeglądarki Google Chrome.

Instrukcje krok po kroku

  1. Otworzyć Przeglądarka Google Chrome (jeśli nie masz zainstalowanego Google Chrome, jest to darmowe pobranie).

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

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

  4. Kod źródłowy tej strony będzie teraz wyświetlany jako nowa karta w przeglądarce.

  5. Możesz też użyć skrótu klawiaturowego CTRL + U na komputerze PC, aby otworzyć okno z wyświetlonym kodem źródłowym witryny. Na komputerze Mac skrót ten to Command + Option + U.

Narzędzia deweloperskie

Oprócz prostego Zobacz stronę źródłową Możliwość, którą oferuje Google Chrome, możesz także skorzystać z doskonałych Narzędzi dla programistów, aby jeszcze bardziej zagłębić się w stronę. Narzędzia te pozwolą ci nie tylko zobaczyć HTML, ale także CSS, który stosuje się do wyświetlania elementów w tym dokumencie HTML.

Aby użyć narzędzi programistycznych Chrome:

  1. otwarty Google Chrome.

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

  3. Kliknij ikona z trzema liniami w prawym górnym rogu okna przeglądarki.

  4. Z poziomu menu przesuń kursor myszy w górę Więcej narzędzi a następnie kliknij Narzędzia deweloperskie w menu, które się pojawi.

  5. Otworzy się okno z kodem źródłowym HTML po lewej stronie panelu i powiązanym z nim CSS po prawej stronie.

  6. Alternatywnie, jeśli klikniesz prawym przyciskiem myszy element na stronie internetowej i wybierz Sprawdzać z menu, które się pojawi, narzędzia programistyczne Chrome pojawią się i wybrany element zostanie podświetlony w kodzie HTML z odpowiednim CSS pokazanym po prawej stronie. Jest to bardzo pomocne, jeśli chcesz dowiedzieć się więcej o tym, jak utworzono konkretny fragment strony.

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

Z biegiem lat wielu nowych projektantów stron internetowych zastanawiało się, czy dopuszczalne jest przeglądanie kodu źródłowego witryny i wykorzystywanie go do edukacji, a ostatecznie do pracy, którą wykonują. Podczas gdy kopiowanie kodu witryny na sprzedaż hurtową i przekazywanie jej jako własnej na stronie jest z pewnością nie do przyjęcia, używanie tego kodu jako odskoczni do uczenia się jest tak naprawdę postępem w tej branży.

Jak wspomnieliśmy na początku tego artykułu, ciężko byłoby znaleźć działającego profesjonalistę, który nie nauczyłby się czegoś, przeglądając źródło strony! Tak, przeglądanie kodu źródłowego witryny jest legalne. Używanie tego kodu jako zasobu do zbudowania czegoś podobnego jest również w porządku. Przyjmowanie kodu tak jak jest i przekazywanie go, gdy twoja praca jest tam, gdzie zaczynasz napotykać problemy.

W końcu specjaliści od Internetu uczą się od siebie nawzajem i często ulepszają pracę, którą widzą i są zainspirowani, więc nie wahaj się zobaczyć kodu źródłowego strony i użyj go jako narzędzia do nauki.