0Pricing
Frontend Academy · Lekcja

Narzędzia deweloperskie: otwieranie i korzystanie z DevTools

Otwieraj Chrome DevTools, sprawdzaj elementy, czytaj konsolę, obserwuj żądania sieciowe i edytuj CSS na żywo w przeglądarce.

Narzędzia deweloperskie: otwieranie i korzystanie z DevTools to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 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.

Czym są narzędzia DevTools przeglądarki?

Każda nowoczesna przeglądarka zawiera wbudowany zestaw narzędzi dla programistów. DevTools umożliwiają analizowanie HTML i CSS, debugowanie JavaScript, profilowanie wydajności, monitorowanie żądań sieciowych i wiele więcej — bez opuszczania przeglądarki.

Otwieranie narzędzi DevTools

Narzędzia DevTools można otworzyć za pomocą F12 (Windows/Linux) lub Cmd+Option+I (Mac). Można też kliknąć dowolny element prawym przyciskiem myszy i wybrać opcję Zbadaj. Skrót Ctrl+Shift+J / Cmd+Option+J otwiera bezpośrednio panel Konsola.

Panel Elementy

Panel Elementy pokazuje aktualne drzewo DOM. Należy kliknąć dowolny element, aby go wybrać i zobaczyć jego obliczone style w panelu Style. Można dwukrotnie kliknąć, aby edytować HTML lub wartości CSS w czasie rzeczywistym — zmiany są natychmiastowe, ale nie zostają zapisane w pliku.

Edytowanie CSS na żywo

W panelu Style należy kliknąć dowolną wartość właściwości, aby ją zmienić. Nowe reguły można dodawać za pomocą przycisku +. Pola wyboru pozwalają wyłączać reguły. To najszybszy sposób na prototypowanie CSS bez przełączania się do edytora.

Panel Konsola

Konsola wyświetla rejestrowane komunikaty, ostrzeżenia i błędy. Można również wpisywać JavaScript bezpośrednio i go wykonywać. Podczas debugowania można używać console.log(), console.warn(), console.error() i console.table() do wyświetlania danych.

// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');

Panel Sieć

Panel Sieć pokazuje każde żądanie HTTP wysyłane przez stronę. Po wybraniu żądania można zobaczyć jego nagłówki, wyświetlić podgląd treści odpowiedzi i sprawdzić wykres czasowy. Żądania można filtrować według typu: XHR/Fetch, JS, CSS, Images, Fonts.

Odczytywanie czasu obsługi żądania

Każde żądanie zawiera informacje o etapach: Queued, DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB) i Content Download. TTFB (Time To First Byte) odzwierciedla czas odpowiedzi serwera.

Ograniczanie przepustowości sieci

Z menu ograniczania przepustowości w panelu Sieć można skorzystać, aby symulować wolne połączenie 3G lub tryb offline. Pozwala to wykryć problemy z wydajnością niewidoczne przy szybkim łączu szerokopasmowym i tworzyć rozwiązania działające także u użytkowników ze słabym połączeniem.

Tryb urządzenia

Należy kliknąć ikonę urządzenia (Ctrl+Shift+M / Cmd+Shift+M), aby włączyć tryb urządzenia. Można symulować mobilne obszary widoku, DPR, zdarzenia dotykowe i warunki sieciowe. Dostępne są gotowe profile, takie jak iPhone 14, lub można ustawić niestandardową szerokość.

Panel Źródła

Panel Źródła umożliwia przeglądanie plików JavaScript i ustawianie w nich punktów przerwania. Punkt przerwania wstrzymuje wykonywanie kodu, dzięki czemu można sprawdzić wartości zmiennych i stos wywołań oraz wykonywać kod wiersz po wierszu za pomocą F10 (step over) i F11 (step into).

Punkty przerwania i debugger

Dodaj punkt przerwania, klikając numer wiersza w panelu Sources. Gdy wykonywanie zostanie wstrzymane, najedź kursorem na zmienne, aby zobaczyć ich wartości, lub wpisz je w Console. W panelu Call Stack sprawdź, które funkcje doprowadziły do tego miejsca.

// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is open

Szybki test

Który panel DevTools wyświetla wszystkie żądania HTTP wysyłane przez stronę, wraz z ich kodami stanu i czasami odpowiedzi?

Podsumowanie: zestaw narzędzi DevTools

Elements: inspekcja i edycja bieżącego DOM. Console: rejestrowanie komunikatów i uruchamianie JavaScriptu. Network: monitorowanie ruchu HTTP. Sources: ustawianie punktów przerwania i debugowanie. Device Mode: testowanie responsywnych układów. Opanowanie tych czterech paneli całkowicie zmieni sposób debugowania.

Często zadawane pytania

Czy lekcja „Narzędzia deweloperskie: otwieranie i korzystanie z DevTools” jest bezpłatna?

Tak — pełny tekst „Narzędzia deweloperskie: otwieranie i korzystanie z DevTools” 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 „Narzędzia deweloperskie: otwieranie i korzystanie z DevTools”?

Otwieraj Chrome DevTools, sprawdzaj elementy, czytaj konsolę, obserwuj żądania sieciowe i edytuj CSS na żywo w przeglądarce. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Narzędzia deweloperskie: otwieranie i korzystanie z DevTools”?

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

  1. Przeglądarki, DNS i HTTP: cykl życia żądania
  2. HTML, CSS i JavaScript: zadania poszczególnych warstw
  3. Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie
  4. Narzędzia deweloperskie: otwieranie i korzystanie z DevTools
← Powrót do Frontend Academy