Na ilustracji przedstawiono
Na zrzucie ekranu widać kartę „Network” w narzędziach deweloperskich przeglądarki (DevTools). To właśnie tutaj podglądamy, jak wygląda ruch sieciowy pomiędzy przeglądarką a serwerem. Każdy wiersz listy to jedno żądanie HTTP/HTTPS: dokument HTML, arkusz CSS, skrypt JS, grafika, font itp. W kolumnach masz m.in. Name (adres zasobu), Status (kody odpowiedzi HTTP, np. 200, 307), Type (rodzaj zasobu), Size (wielkość odpowiedzi) oraz Time (czas pobierania). U góry widać wykres czasowy, który pokazuje, kiedy poszczególne żądania były wysyłane i jak długo trwało ich obsłużenie. To jest klasyczna analiza ruchu sieciowego między serwerem a przeglądarką, a nie testy funkcjonalne czy bezpieczeństwa. W praktyce takie narzędzie wykorzystuje się do diagnozowania problemów z wydajnością strony (np. które pliki ładują się najdłużej), do sprawdzania, czy wszystkie zasoby ładują się poprawnie (brak błędów 404, 500), do inspekcji nagłówków HTTP (np. cache-control, content-type, CORS), a także do podglądu zapytań AJAX / Fetch/XHR wysyłanych przez skrypty JavaScript. Moim zdaniem znajomość tej zakładki to absolutna podstawa pracy front-end developera i testera, bo pozwala szybko zweryfikować, co naprawdę dzieje się „pod maską” podczas ładowania strony i komunikacji klient–serwer. Dobre praktyki w branży zalecają regularne korzystanie z DevTools przy optymalizacji czasu ładowania, analizie błędów sieciowych oraz przy debugowaniu REST API czy komunikacji z backendem.
Na ilustracji widoczna jest zakładka „Network” w narzędziach deweloperskich przeglądarki, a nie panel do testów funkcjonalnych, skanera bezpieczeństwa ani walidatora kodu HTML/CSS. Wiele osób myli te pojęcia, bo wszystko dzieje się w przeglądarce i dotyczy tej samej strony, ale zakres i cel tych narzędzi jest zupełnie inny. Testy funkcjonalne strony internetowej dotyczą sprawdzenia, czy funkcje działają zgodnie z wymaganiami: czy formularz poprawnie się wysyła, czy przyciski reagują, czy logowanie i rejestracja działają poprawnie, czy przekierowania prowadzą we właściwe miejsca. Do tego używa się zwykle scenariuszy testowych, narzędzi typu Selenium, Cypress, Playwright itp. Sama zakładka Network tylko pokazuje żądania HTTP i odpowiedzi, nie „wie”, czy logowanie jest zgodne z wymaganiami biznesowymi. Z kolei testy bezpieczeństwa strony obejmują takie tematy jak podatność na SQL Injection, XSS, CSRF, błędne konfiguracje nagłówków bezpieczeństwa, słabe hasła, podatne biblioteki. Do tego służą skanery bezpieczeństwa (np. OWASP ZAP, Burp Suite), audyty kodu, testy penetracyjne. W DevTools możesz co najwyżej podejrzeć pewne nagłówki bezpieczeństwa, ale to wciąż tylko analiza ruchu, a nie pełny test security. Analiza poprawności kodu strony internetowej to znowu coś innego: walidacja HTML i CSS (np. W3C Validator), lintowanie JavaScript (ESLint), sprawdzanie składni i semantyki. Na ekranie nie ma żadnych komunikatów walidatora, tylko tabela żądań sieciowych. Typowym błędem myślowym jest tu skupienie się na tym, że „to narzędzia deweloperskie, więc pewnie testy” albo „widzę pliki CSS i JS, więc to analiza kodu”. Tymczasem kluczowe jest to, co faktycznie pokazuje interfejs: czasy, statusy HTTP, typy zasobów, rozmiary odpowiedzi. To klasyczne monitorowanie i analizowanie ruchu sieciowego między przeglądarką a serwerem, które pomaga w debugowaniu komunikacji klient–serwer, optymalizacji wydajności i diagnozowaniu błędów ładowania zasobów.