Gdy witryna nie działa poprawnie, właściciel strony widzi zwykle objaw: formularz nie wysyła wiadomości, obraz się nie ładuje albo menu znika na telefonie. Chrome DevTools pozwala zebrać ślady problemu w przeglądarce i przekazać wykonawcy informacje potrzebne do jego odtworzenia.
Krótka odpowiedź
Aby przeanalizować stronę w Chrome DevTools, otwórz narzędzia skrótem Ctrl+Shift+I, odtwórz problem i sprawdź Console oraz Network. Zapisz adres strony, kroki, komunikaty i zrzut ekranu; traktuj je jako objawy, a nie potwierdzoną przyczynę.
Widok mobilny i lokalny pomiar wydajności pomagają zawęzić problem, ale nie zastępują testu na prawdziwym telefonie ani danych rzeczywistych użytkowników.
Usługi KC Mobile
Potrzebujesz pomocy w tym temacie?
Czytasz poradnik „Analiza strony w DevTools: jak samodzielnie sprawdzić witrynę w Chrome”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny.
Co można sprawdzić w Chrome DevTools?
Chrome DevTools pokazuje, co przeglądarka wyświetla, jakie błędy rejestruje i które pliki pobiera podczas działania strony. DevTools to zestaw narzędzi wbudowanych w Chrome; podstawowe informacje można odczytać bez zmiany kodu witryny.
Tabela wskazuje panel przydatny dla konkretnego objawu oraz ograniczenie wstępnej diagnozy. Wybór panelu pomaga zebrać ślady, ale sam nie potwierdza przyczyny awarii.
| Panel | Co sprawdzić | Ograniczenie diagnozy |
|---|---|---|
| Elements | Strukturę elementów i style CSS | Zmiana widoku nie ustala przyczyny po stronie serwera |
| Console | Błędy JavaScript i komunikaty przeglądarki | Błąd może pochodzić ze skryptu zewnętrznego |
| Network | Żądania, odpowiedzi i czas pobierania plików | Status HTTP sam nie wyjaśnia przyczyny odpowiedzi |
| Performance | Zdarzenia i pracę strony podczas nagrania | Wynik zależy od komputera i warunków testu |
| Application | Service workery, pamięć witryny i manifest aplikacji | Usunięcie danych może wylogować użytkownika lub skasować stan lokalny |
| Lighthouse | Automatyczny audyt wybranych obszarów strony | Audyt nie zastępuje testu funkcji ani danych rzeczywistych użytkowników |
Wybierz Console przy błędzie skryptu, Network przy brakującym zasobie, a Elements przy problemie z układem. Szerszy zestaw bezpłatnych narzędzi do kontroli SEO opisujemy w rankingu narzędzi SEO z limitami.
Czytasz poradnik „Analiza strony w DevTools: jak samodzielnie sprawdzić witrynę w Chrome”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny. Omów temat tego poradnika
Jak otworzyć DevTools i przygotować test?
DevTools otworzysz w Chrome skrótem Ctrl+Shift+I na Windows i Linux albo przez menu przeglądarki: Więcej narzędzi > Narzędzia dla deweloperów. Aby wskazać element strony, kliknij go prawym przyciskiem i wybierz Zbadaj; skrót Ctrl+Shift+C uruchamia tryb wskazywania elementów.
Przed testem zanotuj adres strony, godzinę i działanie wywołujące problem. Otwórz DevTools przed ponownym wykonaniem tej czynności, ponieważ Network rejestruje żądania, gdy panel jest otwarty. W Network włącz Preserve log, aby zachować wpisy po przeładowaniu strony, i wyczyść listę przed nowym testem.
Zaznacz Disable cache, jeśli chcesz sprawdzić ładowanie bez plików z pamięci podręcznej przeglądarki. Chrome wyłącza wtedy cache, gdy DevTools jest otwarty; ustawienie nie usuwa plików z serwera. Nie wpisuj danych klientów ani haseł do konsoli. Oficjalna referencja panelu Network opisuje Preserve log i Disable cache.
Kontrola widoczności w Google obejmuje więcej niż inspekcję w przeglądarce. Jeśli chcesz połączyć diagnozę techniczną z pracą nad ruchem organicznym, pozycjonowanie SEO dla firmy może objąć analizę strony i obszarów wymagających poprawy.
Jak sprawdzić błędy JavaScript w Console?
Console pokazuje błędy JavaScript zarejestrowane podczas ładowania strony lub wykonywania działania. Otwórz panel przed testem, wyczyść dotychczasowe wpisy i ponownie wykonaj czynność, która nie działa, na przykład wyślij formularz testowy.
Czerwony wpis zwykle oznacza błąd, a żółty ostrzeżenie lub informację do sprawdzenia. Kolor nie przesądza o wpływie na użytkownika: część błędów dotyczy nieużywanej funkcji, a ostrzeżenie może wskazywać problem w konkretnej przeglądarce. Zapisz pełny komunikat, nazwę pliku i numer linii, jeśli są widoczne.
Nie wklejaj do Console poleceń znalezionych w internecie. Konsola wykonuje JavaScript w kontekście strony, więc nieznany kod może odczytać dostępne dane lub wykonać działanie w zalogowanej sesji. Do zgłoszenia zwykle wystarczy tekst błędu, zrzut panelu i opis odtworzenia; przed przekazaniem materiału sprawdź, czy komunikat nie zawiera tokenu, adresu e-mail ani danych osobowych.
Błąd w Console jest śladem, a nie potwierdzeniem winy konkretnego skryptu. Wykonawca powinien zestawić go z kodem źródłowym, logami serwera i zachowaniem witryny w powtarzalnych warunkach.
Potrzebujesz pomocy w tym temacie?
Jak wykryć problem z ładowaniem plików w Network?
Network pokazuje, czy przeglądarka wysłała żądanie o plik i jaką odpowiedź otrzymała. Otwórz panel, zaznacz Preserve log, a przy teście pierwszej wizyty także Disable cache, po czym przeładuj stronę i odtwórz problem. Filtry Fetch/XHR, JS, CSS i Img zawężają listę do żądań formularza, skryptu, stylu albo obrazu.
Tabela łączy widoczny status z typowym objawem i bezpiecznym dalszym krokiem. Kod odpowiedzi nie ustala samodzielnie źródła problemu.
| Status lub komunikat | Typowy objaw | Co sprawdzić dalej |
|---|---|---|
| 404 | Serwer nie znalazł zasobu pod tym adresem | Adres żądania i to, czy plik został przeniesiony |
| 403 | Serwer odmówił dostępu do zasobu | Uprawnienia, reguły dostępu lub ochronę |
| 5xx | Błąd po stronie serwera lub pośrednika | Czas wystąpienia, powtarzalność i logi serwera |
| CORS error | Przeglądarka zablokowała odpowiedź z innego źródła | Adres źródła i nagłówki odpowiedzi do sprawdzenia przez wykonawcę |
| (failed) | Żądanie nie zakończyło się zwykłą odpowiedzią HTTP | Szczegóły błędu, połączenie i moment przerwania żądania |
Kod 404 nie wyjaśnia, czy przyczyną jest zły link, brak pliku czy nieaktualna konfiguracja. Kliknij żądanie i zachowaj jego adres, status, typ oraz zakładkę Headers lub Response, jeśli nie zawiera danych poufnych. Nie naprawiaj błędów 403 i 5xx przez samodzielną zmianę uprawnień ani wyłączanie zabezpieczeń. Chrome opisuje odczyt żądań w dokumentacji Network.
Jak sprawdzić element strony w Elements?
Elements pozwala znaleźć widoczny element strony i sprawdzić jego strukturę HTML oraz style CSS. Włącz ikonę wskazywania elementu lub skrót Ctrl+Shift+C, a następnie kliknij tekst, przycisk albo fragment układu, który wygląda nieprawidłowo.
Po prawej stronie sprawdź aktywne reguły w Styles oraz rozmiar i położenie elementu w Computed lub modelu pudełkowym. Zmiana wartości CSS w DevTools jest lokalnym eksperymentem w przeglądarce. Po odświeżeniu strony tymczasowa edycja znika i nie zapisuje się na serwerze, chyba że deweloper skonfigurował własny przepływ Workspace.
Do zgłoszenia zapisz nazwę elementu, widoczną regułę CSS i zrzut pokazujący problem. Sam selektor nie wskazuje źródła błędu: wygląd może wynikać z reguły nadrzędnej, skryptu, treści dynamicznej lub szerokości ekranu. Relacje między podstronami omawia przewodnik po narzędziach do analizy struktury strony.
Jak porównać działanie strony na telefonie?
Tryb urządzenia w DevTools symuluje szerokość widoku, orientację, wybrane zdarzenia dotykowe oraz niektóre warunki sieci i procesora. Otwórz DevTools, kliknij Toggle device toolbar albo naciśnij Ctrl+Shift+M, wybierz Responsive lub urządzenie z listy i ustaw szerokość, przy której występuje problem. Następnie sprawdź menu, formularz, przyciski i przewijanie.
Zapisz różnice w zachowaniu: element wychodzi poza ekran, przycisk zasłania pole, menu nie zamyka się po wyborze albo formularz nie daje się wysłać. Zanotuj, czy zmiana szerokości usuwa problem i czy dotyczy jednej podstrony, czy całego szablonu.
Symulacja nie uruchamia witryny na fizycznym telefonie i nie odwzorowuje w pełni jego procesora ani wszystkich zachowań systemu. Dokumentacja Chrome opisuje Device Mode jako przybliżenie działania urządzenia mobilnego; błędy dotyku, klawiatury ekranowej, aparatu czy płatności sprawdź także na realnym urządzeniu (dokumentacja trybu urządzenia).
Jak odczytać podstawowe dane o wydajności?
Panel Performance pozwala nagrać ślad działania strony i zobaczyć zadania wykonywane podczas testu. Otwórz Performance, kliknij Record, wykonaj konkretną czynność, na przykład otwarcie menu lub przejście do koszyka, a następnie zatrzymaj nagranie. Zapisz, który krok był wolny i gdzie na osi czasu pojawiło się opóźnienie.
Długie zadanie na głównym wątku może opóźniać reakcję strony, ale sam wykres nie wskazuje bezpiecznej poprawki. Rozwinięcie śladu pokazuje szczegóły funkcji i zasobów, które wykonawca może powiązać z kodem. Jeśli testujesz wolne ładowanie, wykonaj osobny pomiar z ograniczeniem sieci.
Pojedynczy wynik zależy od komputera, rozszerzeń, obciążenia i warunków sieciowych. Nie traktuj go jako reprezentatywnej miary dla wszystkich odwiedzających. Szerszą kontrolę sygnałów technicznych opisujemy w przewodniku po narzędziach do analizy technical SEO.
Perspektywa KC Mobile: w pracy przy stronach najwięcej czasu oszczędza zgłoszenie wiążące pomiar z konkretną czynnością użytkownika. Sama liczba z Performance bez opisu kroku często nie pozwala ustalić, czy problem dotyczy ładowania, czy późniejszej interakcji. Zasady nagrywania śladu opisuje dokumentacja Performance.
Jak przekazać wyniki analizy wykonawcy?
Dobre zgłoszenie zawiera adres, środowisko, kroki odtworzenia i widoczny skutek dla użytkownika. Oddziel obserwację od hipotezy: napisz "po kliknięciu Wyślij pojawia się 500 w Network", a nie "serwer formularza jest źle skonfigurowany", jeśli przyczyna nie została potwierdzona.
Tabela pokazuje pola, które pomagają wykonawcy odtworzyć problem bez zgadywania. Podaj środowisko i działanie prowadzące do błędu, ale usuń dane poufne.
| Pole zgłoszenia | Co wpisać | Przykład informacji |
|---|---|---|
| Adres strony | Pełny URL bez danych logowania | Adres formularza kontaktowego |
| Środowisko | Chrome, system, widok i urządzenie | Chrome na Windows, widok 390 px |
| Kroki odtworzenia | Kolejne czynności przed błędem | Otwórz formularz, wypełnij pola testowe, wybierz Wyślij |
| Objaw | Co widzi lub czego nie może zrobić użytkownik | Formularz nie potwierdza wysłania |
| Dowód | Zrzut, komunikat Console albo żądanie Network | Status 500 i godzina testu |
Usuń ze zrzutów adresy e-mail, identyfikatory zamówień, tokeny i inne dane klientów. Jeśli problem dotyczy widoczności w Google, sprawdzanie narzędzi SEO swojej strony pomaga dobrać dalsze źródła danych.
Jeśli potrzebujesz wykonawcy do regularnej pracy nad widocznością, poznaj zakres pozycjonowania SEO KC Mobile.
Więcej poradników w tym temacie
Wspomniane narzędzia
Najczęściej zadawane pytania
Jak przeprowadzić analizę strony internetowej w DevTools Chrome?
Jak otworzyć DevTools w przeglądarce Chrome?
Co oznacza błąd 404 w zakładce Network?
Czy zmiany wprowadzone w Elements zapisują się na stronie?
Jak sprawdzić stronę na urządzeniu mobilnym w DevTools?
Krzysztof Czapnik
Founder & Technical Lead, KC Mobile
Projektuję i rozwijam strony WordPress, sklepy WooCommerce oraz aplikacje internetowe. Łączę projektowanie z programowaniem, integracjami i technicznym SEO. Projekty KC Mobile prowadzę osobiście.
Potrzebujesz pomocy z tym tematem? Napisz - odpowiem osobiście w 24h.
Potrzebujesz pomocy w tym temacie?
Czytasz poradnik „Analiza strony w DevTools: jak samodzielnie sprawdzić witrynę w Chrome”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny.