Jak korzystać z narzędzia Inspect Element w Chrome?

Narzędzie Inspect Element w Google Chrome to potężna funkcja, która pozwala użytkownikom przeglądać i modyfikować HTML, CSS i JavaScript strony internetowej bezpośrednio z poziomu przeglądarki. Jest ono powszechnie używane przez twórców stron internetowych i projektantów do debugowania, edytowania stylów, testowania kodu, a nawet bliższego przyjrzenia się temu, jak zbudowane są niektóre elementy witryny. Ten przewodnik pokaże ci, jak uzyskać dostęp do narzędzia Inspect Element w Chrome i skutecznie z niego korzystać.

Czym jest narzędzie Inspect Element?

Narzędzie Inspect Element jest częścią pakietu narzędzi deweloperskich Chrome (DevTools). Pozwala ono na:

Sprawdzanie i edytowanie kodu HTML i CSS w czasie rzeczywistym.
Debugowanie kodu JavaScript.
Symulować różne rozmiary ekranu w celu testowania responsywnych projektów.
Kontrolować żądania sieciowe i sprawdzać, jak witryna ładuje zasoby.
Testowanie modyfikacji bez wpływu na działającą witrynę.

Jak otworzyć narzędzie Inspect Element w Chrome

Istnieje kilka sposobów uzyskania dostępu do narzędzia Inspect Element w przeglądarce Chrome:

Metoda 1: Kliknięcie prawym przyciskiem myszy na stronie internetowej

Przejdź do strony internetowej, którą chcesz sprawdzić.
Kliknij prawym przyciskiem myszy dowolny element na stronie (np. obraz, tekst lub przycisk).
Z wyświetlonego menu kontekstowego wybierz opcję Sprawdź.

Spowoduje to otwarcie karty Elementy narzędzia DevTools, podświetlając kod HTML wybranego elementu.

Metoda 2: Korzystanie ze skrótów klawiaturowych

Narzędzie Inspect Element można szybko otworzyć za pomocą skrótów klawiaturowych:

Windows/Linux: Ctrl Shift I
Mac: Command Option I

Metoda 3: Z menu Chrome

Kliknij menu z trzema kropkami (⋮) w prawym górnym rogu przeglądarki Chrome.
Przejdź do Więcej narzędzi > Narzędzia dla programistów.

Panel DevTools otworzy się na dole lub z boku okna przeglądarki.

Przegląd interfejsu DevTools

Po otwarciu narzędzia Inspect Element, w górnej części panelu DevTools pojawi się kilka zakładek:

Elementy: Pokazuje strukturę HTML i style CSS strony.
Konsola: Przydatna do uruchamiania poleceń JavaScript i przeglądania komunikatów o błędach.
Źródła: Umożliwia przeglądanie i debugowanie plików JavaScript.
Sieć: Wyświetla wszystkie żądania sieciowe, co jest pomocne przy analizowaniu czasu ładowania strony i zasobów.
Wydajność: Pomaga analizować wydajność strony internetowej.
Aplikacja: Wyświetla szczegóły, takie jak pliki cookie, pamięć lokalna i pamięć podręczna.
Lighthouse: Zapewnia audyt strony internetowej i raporty wydajności.

Najczęściej używana karta: Elementy

Zakładka Elementy stanowi rdzeń narzędzia Inspect Element, umożliwiając przeglądanie i modyfikowanie kodu HTML i CSS strony internetowej.

Jak korzystać z narzędzia Inspect Element dla HTML i CSS

1. Sprawdzanie elementów HTML

Otwórz zakładkę Elementy (klikając prawym przyciskiem myszy i wybierając opcję Sprawdź lub używając skrótów klawiaturowych).
Najedź kursorem na różne elementy w drzewie HTML, aby zobaczyć je podświetlone na stronie internetowej.
Kliknij dowolny element HTML w panelu Elementy, aby wyświetlić odpowiadające mu style CSS w panelu Style po prawej stronie.

2. Edycja kodu HTML w czasie rzeczywistym

Kliknij dwukrotnie znacznik HTML, atrybut lub tekst na karcie Elementy, aby go edytować.
Naciśnij Enter, aby zastosować zmiany.
Zmiany zostaną natychmiast odzwierciedlone na stronie, ale są tymczasowe i zostaną zresetowane po odświeżeniu strony.

Przykład: Zmień tekst nagłówka z <h1>Welcome to My Site</h1> to <h1>Hello World!</h1> , klikając dwukrotnie tekst i edytując go.

3. Edycja CSS w czasie rzeczywistym

Wybierz element, który chcesz nadać styl na karcie Elementy.
W panelu Style po prawej stronie możesz edytować istniejące właściwości CSS lub dodawać nowe.
Aby dodać nowy styl, kliknij puste miejsce w panelu Style i wpisz właściwość CSS oraz wartość.

Przykład: Zmiana koloru tła elementu:

background-color: #ff0000;

Zmiany zostaną zastosowane natychmiast, ale nie zostaną zapisane na stałe na stronie internetowej.

4. Włączanie i wyłączanie stylów CSS

Każda właściwość CSS w panelu Style ma obok siebie pole wyboru.
Usuń zaznaczenie właściwości, aby tymczasowo ją wyłączyć, lub zaznacz ją ponownie, aby ją ponownie włączyć.

Jest to przydatne do testowania, jak zmiany w CSS mogą wpłynąć na projekt bez trwałej edycji kodu.

5. Kopiowanie i edytowanie kodu HTML

Kliknij prawym przyciskiem myszy element HTML na karcie Elementy.
Wybierz Kopiuj > Kopiuj element, aby skopiować wybrany kod HTML.
Można go następnie wkleić do edytora tekstu lub użyć do opracowania.

Korzystanie z karty Konsola

Zakładka Console to kolejne potężne narzędzie w DevTools, umożliwiające uruchamianie poleceń JavaScript bezpośrednio na stronie:

Przejdź do zakładki Console.
Wpisz polecenia lub wyrażenia JavaScript i naciśnij Enter, aby je wykonać.

Przykład: Zmiana koloru tła strony:

document.body.style.backgroundColor = ‘#00ff00’;

Spowoduje to zmianę koloru tła strony na zielony.

Symulacja urządzeń mobilnych

Narzędzie Inspect Element pozwala również przetestować wygląd strony na różnych rozmiarach ekranu i urządzeniach:

Kliknij ikonę paska narzędzi Przełącz urządzenie (mała ikona telefonu i tabletu) w lewym górnym rogu panelu DevTools.
Wybierz urządzenie z rozwijanego menu (np. iPhone, iPad, Galaxy).
Dostosuj rozdzielczość i orientację ekranu, aby zobaczyć, jak witryna reaguje na różne rozmiary ekranu.

Ta funkcja jest niezwykle przydatna do testowania responsywnych projektów.

Debugowanie JavaScript

Zakładka Źródła służy do debugowania JavaScript:

Otwórz kartę Źródła w DevTools.
Możesz ustawić punkty przerwania, klikając numery linii kodu JavaScript.
Umożliwia to wstrzymanie wykonywania kodu i sprawdzenie zmiennych, funkcji i stosu wywołań.

Analiza sieci za pomocą karty Sieć

Karta Sieć pokazuje wszystkie żądania sieciowe, które występują podczas ładowania strony, w tym obrazy, skrypty i arkusze stylów:

Otwórz kartę Sieć przed odświeżeniem strony.
Odśwież stronę, aby zobaczyć wszystkie żądania sieciowe.
Możesz filtrować żądania według typu (np. XHR, JS, CSS) i zobaczyć, jak długo trwa ładowanie każdego zasobu.

Jest to przydatne do optymalizacji szybkości ładowania strony.

Podsumowanie

Narzędzie Inspect Element w Google Chrome to wszechstronna i niezbędna funkcja dla twórców stron internetowych, projektantów, a nawet ciekawskich użytkowników, którzy chcą zrozumieć, w jaki sposób tworzone są strony internetowe. Ucząc się, jak sprawdzać i modyfikować HTML, CSS i JavaScript, możesz debugować błędy, testować nowe style i upewnić się, że Twoja witryna wygląda świetnie na różnych urządzeniach. Dzięki różnym narzędziom i kartom dostępnym w Chrome DevTools można lepiej zrozumieć, jak działają strony internetowe i zoptymalizować je pod kątem lepszej wydajności.