Chrome DevTools: Funkcje, które przyspieszają debugowanie

Czy wiesz, że Chrome DevTools kryje funkcje, które mogą zaoszczędzić Ci godzin debugowania? Nawet doświadczeni deweloperzy często używają tylko ułamka możliwości, jakie oferuje to potężne narzędzie.

W tym artykule pokażę Ci funkcje DevTools, które zmieniły mój workflow i pozwoliły mi debugować kod znacznie szybciej. Niektóre z nich odkryłem dopiero po latach pracy z Chrome — a szkoda, że nie wcześniej.

1. Conditional Breakpoints — Przerywaj tylko gdy to potrzebne

Standardowe breakpointy zatrzymują kod za każdym razem, gdy są wykonywane. Ale co, jeśli problem występuje tylko przy określonych warunkach?

Jak to działa:

Kliknij prawym przyciskiem myszy na numerze linii i wybierz "Add conditional breakpoint". Możesz wpisać dowolne wyrażenie JavaScript.

Przykłady użycia:

• Zatrzymaj tylko gdy user.id === 12345
• Debuguj gdy response.status >= 400
• Sprawdź gdy items.length > 100

Pro Tip:

Używaj warunków złożonych: (user && user.role === 'admin' && count > 5) — przerywaj tylko dla adminów przy większej liczbie iteracji.

2. Logpoints — Logowanie bez zmiany kodu

Często dodajemy console.log() tylko po to, by potem zapomnieć go usunąć. Logpoints to eleganckie rozwiązanie tego problemu.

Jak to działa:

Kliknij prawym przyciskiem na numerze linii → "Add logpoint". Wpisz wiadomość do zalogowania — możesz używać interpolacji jak w template strings.

Przykład:

User {user.name} logged in with ID: {user.id}

To wyświetli wartości bez zatrzymywania wykonania kodu. Logpointy są zapisywane w DevTools i działają tylko u Ciebie — nie zmieniasz kodu źródłowego.

3. Network Tab — Więcej niż tylko podgląd zapytań

Copy as fetch/cURL

Kliknij prawym przyciskiem na dowolne zapytanie → "Copy" → "Copy as fetch" lub "Copy as cURL". Możesz od razu wkleić do konsoli lub terminala i testować.

Replay XHR

Debugujesz problem z API? Kliknij prawym przyciskiem na zapytanie → "Replay XHR". Zapytanie zostanie wykonane ponownie z identycznymi parametrami — nie musisz odświeżać strony ani powtarzać całego flow.

Filterowanie zaawansowane

W polu filter wpisuj:

• domain:api.example.com — pokaż tylko zapytania do określonej domeny
• method:POST — tylko POST-y
• status-code:404 — tylko błędy 404
• larger-than:100k — duże pliki
• is:running — zapytania w trakcie wykonania

4. Elements Panel — Edycja CSS w czasie rzeczywistym

Klasy stanu (:hover, :focus, :active)

Kliknij ikonę ":hov" w Elements panel, aby wymusić stan elementu (hover, focus, active, visited). Nie musisz już machać myszką nad elementami.

Computed Styles

Tab "Computed" pokazuje ostateczne wartości CSS po zastosowaniu wszystkich reguł. Świetne do debugowania problemów z kaskadą CSS i specyficznością selektorów.

$0 — Ostatni zaznaczony element

W konsoli wpisz $0 aby odwołać się do ostatniego elementu zaznaczonego w Elements panel. Możesz na nim wykonywać dowolne operacje:

$0.style.backgroundColor = 'red';
$0.scrollIntoView();
$0.click();

5. Sources Panel — Praca z kodem źródłowym

Mapowanie źródła (Source Maps)

Debuguj kod TypeScript/Babel/Webpack jakby był oryginalnym źródłem. Upewnij się, że masz włączone "Enable JavaScript source maps" w ustawieniach.

Blackboxing — Pomijaj biblioteki

Kliknij prawym przyciskiem na plik biblioteki (np. react.min.js) → "Blackbox script". Podczas debugowania debugger nie wchodzi w kod tej biblioteki — śledzenie stosu będzie pokazywać tylko Twój kod.

Pretty Print ({})

Przycisk "{}" w Sources panel formatuje zminifikowany kod, czyniąc go czytelnym. Nie zastąpi oryginalnego formatowania, ale pozwoli zrozumieć strukturę.

6. Console — Zaawansowane triki

$ — Skróty do querySelector

• $('#myId') — to samo co document.querySelector('#myId')
• $$('.myClass') — to samo co document.querySelectorAll('.myClass')
• $x('//div') — wykonuje XPath

monitorEvents — Śledź zdarzenia

Chcesz wiedzieć jakie eventy są wywoływane na elemencie?

monitorEvents($0, 'click');
monitorEvents($0, ['click', 'focus', 'blur']);
unmonitorEvents($0); // wyłącz monitoring

copy() — Kopiuj do schowka

copy(JSON.stringify(data, null, 2)); // sformatowany JSON w schowku
copy($0.outerHTML); // HTML elementu
copy(window.location.href); // URL

getEventListeners($0)

Pokaż wszystkie event listenery przypisane do elementu. Świetne do debugowania problemów z eventami.

7. Lighthouse — Audyt wydajności w DevTools

Tab "Lighthouse" (lub "Performance insights") pozwala przeprowadzić pełny audyt strony:

• Wydajność (Core Web Vitals)
• Dostępność (Accessibility)
• Najlepsze praktyki (Best Practices)
• SEO
• PWA

Szybki audyt wydajności:

1. Otwórz Lighthouse
2. Wybierz "Performance"
3. Kliknij "Analyze page load"
4. Otrzymasz wyniki z konkretnymi rekomendacjami

8. Application Panel — Zarządzanie danymi

Local Storage & Session Storage

Podgląd, edycja i usuwanie danych w localStorage/sessionStorage w czasie rzeczywistym.

Cookies

Sprawdzaj, edytuj i usuwaj ciasteczka. Sprawdź flagi HttpOnly, Secure, SameSite.

Service Workers

Debuguj Service Workery, wymuszaj update, testuj offline mode.

IndexedDB

Podgląd i edycja danych w IndexedDB — przydatne przy aplikacjach PWA i dużych zbiorach danych.

9. Device Mode — Responsywność i więcej

Predefiniowane urządzenia

Szybko przełączaj się między widokiem desktop, mobile, tablet. Możesz też dodać własne urządzenia.

Throttling — Symulacja wolnego internetu

W Device Mode możesz symulować:

• Fast 3G
• Slow 3G
• Offline
• Własne ustawienia przepustowości

To kluczowe dla testowania Core Web Vitals i UX przy słabym połączeniu.

Geolocation override

Symuluj lokalizację użytkownika — przydatne przy testowaniu funkcji geolokalizacji bez wychodzenia z biura.

10. Shortcuts — Szybki dostęp

Otwieranie DevTools

• F12 lub Ctrl+Shift+I — otwórz/zamknij
• Ctrl+Shift+J — otwórz Console
• Ctrl+Shift+C — Inspect element (tryb zaznaczania)

Wewnątrz DevTools

• Ctrl+P — szybkie otwieranie pliku
• Ctrl+Shift+F — wyszukiwanie we wszystkich plikach
• Ctrl+G — przejdź do linii
• Ctrl+L — wyczyść konsolę
• Ctrl+\ — podziel ekran (docking)

Przydatne rozszerzenia DevTools

React Developer Tools

Dedykowane narzędzie do debugowania React — podgląd komponentów, props, state, hooks.

Vue.js devtools

Podobne narzędzie dla Vue — inspekcja komponentów, Vuex store, events.

Redux DevTools

Śledzenie akcji, stanu store, time-travel debugging.

Podsumowanie

Chrome DevTools to potężne narzędzie, które znacząco przyspiesza pracę dewelopera — pod warunkiem, że znasz jego możliwości. Funkcje, które pokazałem w tym artykule, zaoszczędziły mi dziesiątki godzin debugowania.

Kluczowe takeaways:

1. Używaj Conditional Breakpoints zamiast manualnie sprawdzać warunki
2. Logpoints zamiast console.log — nie zaśmiecasz kodu
3. Network Tab do zaawansowanego filtrowania i powtarzania zapytań
4. $0 w konsoli do szybkiego dostępu do zaznaczonego elementu
5. monitorEvents() do śledzenia eventów
6. Lighthouse do regularnych audytów wydajności

Pamiętaj: czas poświęcony na naukę narzędzi zwraca się z nawiązką. Zainwestuj godzinę w eksplorację DevTools, a zaoszczędzisz dziesiątki godzin w przyszłości.