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

Photo of author

By maciekx

Niezależnie od tego, czy jesteś projektantem stron internetowych debugującym kod źródłowy witryny, czy po prostu ciekawi Cię, jak wygląda kod witryny, możesz wyświetlić źródło HTML bezpośrednio w Google Chrome. Istnieją dwa sposoby przeglądania źródła HTML: wyświetlanie źródła oraz korzystanie z narzędzi deweloperskich.

Wyświetl źródło przy użyciu opcji „Wyświetl źródło strony”

Uruchom Chrome i przejdź do strony internetowej, na której chcesz wyświetlić kod źródłowy HTML. Kliknij prawym przyciskiem myszy na stronie i wybierz „Wyświetl źródło strony” lub naciśnij Ctrl + U, aby otworzyć źródło strony w nowej karcie.

Otworzy się nowa karta z całym kodem HTML strony internetowej, całkowicie rozwiniętym i niesformatowanym.

Jeśli szukasz określonego elementu lub części w źródle HTML, korzystanie z opcji „Wyświetl źródło” może być żmudne, szczególnie na stronach intensywnie wykorzystujących JavaScript i CSS.

Sprawdź źródło za pomocą narzędzi programistycznych

Ta metoda korzysta z okienka Narzędzi dla programistów w Chrome i jest znacznie bardziej przejrzysta, ułatwiając przeglądanie kodu źródłowego. HTML jest tutaj łatwiejszy do odczytania dzięki dodatkowemu formatowaniu oraz możliwości zwijania elementów, których nie chcesz oglądać.

Otwórz Chrome i przejdź do strony, którą chcesz sprawdzić, a następnie naciśnij Ctrl + Shift + I. Obok przeglądanej strony otworzy się zadokowane okienko.

Kliknij małą szarą strzałkę obok elementu, aby go jeszcze bardziej rozwinąć.

Jeśli nie chcesz widzieć całego kodu strony, ale zamiast tego chcesz zbadać określony element, kliknij prawym przyciskiem myszy to miejsce na stronie, a następnie wybierz „Sprawdź”.

Gdy okienko otworzy się tym razem, przechodzi bezpośrednio do części kodu zawierającej kliknięty element.

Jeśli chcesz zmienić położenie okienka, możesz przenieść je na dół, w lewo, w prawo lub nawet oddokować do osobnego okna. Kliknij ikonę menu (trzy kropki), a następnie wybierz jedną z opcji: oddokuj do osobnego okna, zadokuj po lewej stronie, zadokuj na dole lub zadokuj po prawej stronie.

To wszystko. Gdy skończysz przeglądać kod, zamknij kartę „Wyświetl źródło” lub kliknij „X” w okienku Narzędzi dla programistów, aby powrócić do swojej strony internetowej.


newsblog.pl