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

click fraud protection

Co wiedzieć

  • Kliknij prawym przyciskiem myszy stronę internetową i wybierz Zobacz stronę źródłową.
  • Skrót: naciśnij klawisz kontrolny+U (komputer z systemem Windows) lub Komenda+Opcja+U (Prochowiec).
  • Aby korzystać 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 witryny internetowej Kod źródłowy HTML w przeglądarce internetowej Google Chrome, a także uzyskiwać dostęp do narzędzi programistycznych Chrome i korzystać z nich. Przeglądanie kodu źródłowego witryny to doskonały sposób na naukę języka HTML dla początkujących.

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

Jak więc widzisz 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 Zainstalowano Google Chrome, To jest darmowe pobranie).

  2. Przejdź do strona internetowa, którą chciałbyś zbadać.

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

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

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

Osoba wybierająca opcję Wyświetl źródło strony na stronie internetowej
Hilary Allison / Lifewire 

Użyj Narzędzi dla programistów Chrome

Oprócz prostych Zobacz stronę źródłową możliwości, które oferuje Google Chrome, możesz również skorzystać z ich doskonałej Narzędzia deweloperskie zagłębić się jeszcze głębiej w witrynę. Narzędzia te pozwolą Ci nie tylko zobaczyć kod HTML, ale także CSS, który ma zastosowanie do wyświetlania elementów w tym dokumencie HTML.

Aby skorzystać z narzędzi programistycznych Chrome:

  1. otwarty Google Chrome.

  2. Nawigować do strona internetowa, którą chcesz zbadać.

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

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

    Pozycja menu narzędzi programistycznych w Google Chrome
  5. Otworzy się okno, które pokazuje kod źródłowy HTML po lewej stronie panelu i powiązany 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 wyskoczą i podświetlą konkretną część wybraną w kodzie HTML z odpowiednim CSS pokazanym po prawej stronie. Jest to bardzo pomocne, jeśli chcesz dowiedzieć się więcej o konkretnym fragmencie witryny.

Czy wyświetlanie kodu źródłowego jest legalne?

Przez lata 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 hurtowo i przekazywanie go jako własnego na stronie internetowej z pewnością nie jest akceptowalne, używanie tego kodu jako trampoliny do nauki jest w rzeczywistości, jak wiele postępów jest w tym poczynionych przemysł.

Jak wspomnieliśmy na początku tego artykułu, trudno byłoby dziś znaleźć pracującego profesjonalistę internetowego, który nie nauczyłby się niczego, przeglądając źródło witryny! Tak, wyświetlanie kodu źródłowego witryny jest legalne. Używanie tego kodu jako zasobu do zbudowania czegoś podobnego jest również bezpieczne. Przyjmowanie kodu takim, jakim jest i przekazywanie go jako swojej pracy, to miejsce, w którym zaczynasz napotykać problemy.

W końcu profesjonaliści sieciowi uczą się od siebie nawzajem i często ulepszają pracę, którą widzą i którą inspirują, więc nie wahaj się przejrzeć kodu źródłowego witryny i użyć go jako narzędzia 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 witryna, którą przeglądasz, tym bardziej złożony może być jej kod). Oprócz struktury HTML, która tworzy stronę, będą również CSS (kaskadowe arkusze stylów), które dyktują wygląd tej witryny. Ponadto wiele dzisiejszych witryn internetowych zawiera pliki skryptów dołączone do kodu HTML.

Prawdopodobnie dołączonych zostanie wiele plików skryptów; w rzeczywistości każdy z nich zasila różne 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 tą 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, aby stworzyć stronę internetową, którą widzisz w przeglądarce. W miarę zaznajomienia się z kodem będziesz mógł nauczyć się z niego więcej i nie będzie się to wydawać takie zniechęcające.