Chrome DevTools: Elements, Console, Network
Poruszaj się po panelach Elements, Console i Network, aby sprawdzać style, debugować błędy JavaScript i monitorować żądania HTTP.
Chrome DevTools: Elements, Console, Network to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Efektywne otwieranie DevTools
Kliknij dowolny element prawym przyciskiem myszy i wybierz Inspect, aby otworzyć DevTools z zaznaczonym elementem. Klawisz F12 przełącza widoczność panelu. Skrót Cmd+Shift+C (Mac) lub Ctrl+Shift+C (Windows) od razu włącza tryb inspekcji bez otwierania całego panelu.
Panel Elements — inspektor DOM
Panel Elements pokazuje aktualne, sparsowane drzewo DOM, a nie surowy kod źródłowy HTML. Odzwierciedla modyfikacje wprowadzone przez JavaScript. Najedź kursorem na węzły, aby podświetlić je na stronie. Kliknij dwukrotnie, aby edytować kod HTML bezpośrednio w panelu.
Panele Styles i Computed
Po zaznaczeniu elementu panel Styles pokazuje wszystkie zastosowane reguły CSS uporządkowane według specyficzności. Przekreślone reguły zostały nadpisane. Panel Computed pokazuje końcowe, obliczone wartości każdej właściwości.
Wymuszanie stanów elementu
Kliknij przycisk :hov w panelu Styles, aby wymusić stan CSS, taki jak :hover, :focus, :active lub :visited. Możesz wtedy sprawdzić style po najechaniu bez konieczności idealnie nieruchomego trzymania kursora.
Wizualizacja modelu pudełkowego
Panel Computed pokazuje interaktywny diagram modelu pudełkowego: zawartość, dopełnienie, obramowanie i margines. Najedź kursorem na dowolny obszar, aby zobaczyć jego wartość. Kliknij, aby na żywo edytować wartości marginesu i dopełnienia.
Podstawy konsoli — rejestrowanie i uruchamianie kodu
Console pokazuje błędy, ostrzeżenia i komunikaty. Wpisz dowolne wyrażenie JavaScript i naciśnij Enter, aby obliczyć jego wynik dla aktualnej strony. Używaj Console jako interaktywnego REPL-a do natychmiastowego testowania fragmentów kodu.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Metody Console API
Oprócz console.log dostępne są: console.warn() (żółte ostrzeżenie), console.error() (czerwony komunikat), console.table() (wyświetla tablicę lub obiekt jako tabelę), console.group() / console.groupEnd() do grupowania wyników oraz console.time() do pomiaru czasu.
Przegląd panelu Network
Każde żądanie HTTP (HTML, JS, CSS, obrazy, XHR, Fetch) pojawia się jako osobny wiersz. Kolumny pokazują metodę, status, rozmiar i czas trwania. Kliknij wiersz, aby zobaczyć pełne szczegóły żądania i odpowiedzi.
Filtrowanie żądań sieciowych
Użyj paska filtrowania, aby wyszukiwać według adresu URL lub filtrować według typu: All, XHR/Fetch, JS, CSS, Img, Media, Font, WS. Filtr XHR/Fetch jest najbardziej przydatny podczas debugowania wywołań API z JavaScriptu.
Sprawdzanie żądania i odpowiedzi
Wybierz żądanie sieciowe, aby zobaczyć: Headers (nagłówki żądania i odpowiedzi), Preview (sformatowany JSON/HTML), Response (surową treść) oraz Timing (poszczególne etapy połączenia). Karta Payload pokazuje parametry treści żądania POST.
Ograniczanie przepustowości — symulowanie wolnych sieci
Kliknij listę rozwijaną ograniczania przepustowości (domyślnie: No throttling), aby zasymulować Slow 3G, Fast 3G lub Offline. Pole wyboru Disable cache uniemożliwia przeglądarce korzystanie z zasobów zapisanych w pamięci podręcznej podczas testowania.
Szybkie sprawdzenie
W którym miejscu Chrome DevTools można zobaczyć wszystkie reguły CSS zastosowane do zaznaczonego elementu, w tym reguły nadpisane?
Podsumowanie: panele Chrome DevTools
Elements: inspekcja i edycja aktualnego DOM oraz CSS. Wymuszanie pseudostanów w celu sprawdzania stylów po najechaniu. Console: rejestrowanie, debugowanie i uruchamianie JavaScriptu na żywo. Network: monitorowanie wszystkich żądań HTTP, sprawdzanie nagłówków i odpowiedzi oraz ograniczanie przepustowości w celu symulowania wolnych połączeń.
Często zadawane pytania
Czy lekcja „Chrome DevTools: Elements, Console, Network” jest bezpłatna?
Tak — pełny tekst „Chrome DevTools: Elements, Console, Network” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Chrome DevTools: Elements, Console, Network”?
Poruszaj się po panelach Elements, Console i Network, aby sprawdzać style, debugować błędy JavaScript i monitorować żądania HTTP. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Chrome DevTools: Elements, Console, Network”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Chrome DevTools: Elements, Console, Network
- VSCode: rozszerzenia, Emmet i skróty
- Konfiguracja Prettier i ESLint
- Zgodność przeglądarek i caniuse.com