Twoje Centrum Szkoleniowe

Narzędzia deweloperskie: debugowanie i profilowanie

Narzędzia deweloperskie umożliwiają debugowanie i profilowanie stron internetowych, co pozwala na szybkie wykrywanie i naprawianie błędów, optymalizację wydajności oraz analizę zachowania strony. W tej lekcji skupimy się na funkcjach związanych z HTML i CSS, aby pomóc Ci lepiej zrozumieć, jak Twoje strony są renderowane i jak możesz je ulepszyć.

 

Dlaczego narzędzia deweloperskie są ważne?

• Szybkie wykrywanie błędów: Pozwalają na natychmiastowe znalezienie i naprawienie problemów z kodem HTML i CSS.
• Podgląd zmian w czasie rzeczywistym: Możesz modyfikować style i strukturę strony bezpośrednio w przeglądarce.
• Optymalizacja wydajności: Narzędzia profilowania pomagają zidentyfikować elementy wpływające na szybkość ładowania i renderowania strony.
• Analiza układu strony: Ułatwiają zrozumienie, jak przeglądarka interpretuje Twój kod i jakie style są stosowane.

 

Podstawowe narzędzia deweloperskie w przeglądarkach

Większość nowoczesnych przeglądarek internetowych, takich jak Google Chrome, Mozilla Firefox, Microsoft Edge czy Safari, oferuje wbudowane narzędzia deweloperskie. Choć mogą się one nieznacznie różnić w interfejsie i funkcjonalnościach, podstawowe narzędzia są zbliżone.

Jak otworzyć narzędzia deweloperskie?

• Windows/Linux:
  • Chrome/Firefox/Edge: Naciśnij F12 lub Ctrl + Shift + I.
• macOS:
  • Chrome/Firefox/Edge: Naciśnij Cmd + Option + I.
  • Safari: Włącz narzędzia deweloperskie w ustawieniach (Safari > Preferencje > Zaawansowane > Pokaż menu Develop w pasku menu), a następnie naciśnij Cmd + Option + I.

 

Panel Elements (Elementy)

Przegląd struktury DOM

Panel Elements (w niektórych przeglądarkach Inspector lub Elementy) pozwala na przeglądanie i edycję drzewa DOM (Document Object Model) strony.

Funkcje:

• Podgląd kodu HTML: Możesz zobaczyć strukturę HTML strony tak, jak widzi ją przeglądarka.
• Edycja kodu HTML: Możesz modyfikować elementy, dodawać lub usuwać węzły.
• Podświetlanie elementów: Po najechaniu na element w panelu, zostanie on podświetlony na stronie, co ułatwia identyfikację.

Praktyczne zastosowanie:

• Debugowanie układu strony: Jeśli element nie pojawia się tam, gdzie powinien, możesz sprawdzić jego pozycję w drzewie DOM.
• Sprawdzanie atrybutów: Możesz zobaczyć i edytować atrybuty elementów, takie jak class, id, src, alt itp.

Edycja styli CSS

Obok panelu z kodem HTML znajduje się panel ze stylami CSS zastosowanymi do wybranego elementu.

Funkcje:

• Podgląd zastosowanych stylów: Widzisz wszystkie style, które wpływają na dany element, wraz z informacją, z którego pliku pochodzą.
• Edycja styli w czasie rzeczywistym: Możesz modyfikować wartości właściwości CSS i natychmiast zobaczyć efekt na stronie.
• Dodawanie nowych stylów: Możesz dodawać nowe właściwości lub nawet całe klasy.
• Przełączanie właściwości: Możesz tymczasowo wyłączyć określone style, aby zobaczyć, jak wpływają na wygląd elementu.

Praktyczne zastosowanie:

• Debugowanie problemów z CSS: Jeśli styl nie jest stosowany, możesz sprawdzić, czy nie jest nadpisany przez inny selektor.
• Eksperymentowanie z wyglądem: Możesz testować nowe style bez konieczności zmiany kodu źródłowego.

Badanie modelu pudełkowego (Box Model)

Narzędzia deweloperskie umożliwiają wizualizację modelu pudełkowego elementu, pokazując wartości margin, border, padding i content.

Funkcje:

• Podgląd rozmiarów: Możesz zobaczyć dokładne wymiary elementu i jego odstępów.
• Edycja wartości: Możesz modyfikować wartości margin, padding itp.

Praktyczne zastosowanie:

• Rozwiązywanie problemów z układem: Jeśli element nie jest poprawnie wyrównany, możesz sprawdzić, czy wartości margin lub padding nie powodują konfliktów.

 

Panel Network (Sieć)

Panel Network pozwala na monitorowanie wszystkich żądań sieciowych wykonywanych przez stronę.

Funkcje:

• Lista żądań: Widzisz wszystkie zasoby ładowane przez stronę (pliki HTML, CSS, JS, obrazki itp.).
• Czasy ładowania: Możesz zobaczyć, ile czasu zajmuje załadowanie każdego zasobu.
• Rozmiary plików: Informacje o wielkości zasobów.
• Statusy HTTP: Możesz sprawdzić, czy żądania zakończyły się sukcesem (status 200), czy wystąpiły błędy (np. 404, 500).

Praktyczne zastosowanie:

• Optymalizacja wydajności: Identyfikacja zasobów, które spowalniają ładowanie strony.
• Wykrywanie błędów ładowania: Sprawdzenie, czy wszystkie pliki są poprawnie ładowane.
• Analiza przepustowości: Możliwość symulacji wolniejszych połączeń sieciowych (np. 3G) w celu sprawdzenia wydajności na urządzeniach mobilnych.

 

Panel Performance (Wydajność)

Panel Performance umożliwia profilowanie strony i analizę jej wydajności podczas renderowania.

Funkcje:

• Nagrywanie aktywności strony: Możesz nagrać przebieg renderowania strony i interakcji użytkownika.
• Analiza klatek: Widzisz, jak długo trwały poszczególne operacje, takie jak Recalculating Style, Layout, Painting.
• Flame Chart: Wizualizacja czasu wykonywania różnych zadań.

Praktyczne zastosowanie:

• Optymalizacja renderowania: Identyfikacja elementów powodujących opóźnienia w renderowaniu strony.
• Analiza zużycia zasobów: Sprawdzenie, które operacje są najbardziej zasobożerne.

 

Panel Application (Aplikacja)

Panel Application pozwala na zarządzanie zasobami przechowywanymi lokalnie przez stronę, takimi jak pliki cookie, Local Storage, Session Storage.

Funkcje:

• Podgląd i edycja plików cookie: Możesz zobaczyć wszystkie pliki cookie ustawione przez stronę i edytować ich wartości.
• Zarządzanie Storage: Możesz przeglądać i modyfikować dane przechowywane w Local Storage i Session Storage.
• Czyszczenie danych: Możliwość usunięcia wszystkich danych przechowywanych przez stronę.

Praktyczne zastosowanie:

• Testowanie funkcjonalności zależnych od plików cookie: Sprawdzanie, jak strona zachowuje się po usunięciu lub zmianie plików cookie.
• Debugowanie przechowywania danych: Weryfikacja poprawności danych zapisywanych lokalnie.

 

Panel Accessibility (Dostępność)

Panel Accessibility (dostępny w niektórych przeglądarkach) pomaga w analizie dostępności strony dla osób z niepełnosprawnościami.

Funkcje:

• Podgląd drzewka dostępności: Widzisz, jak strona jest interpretowana przez technologie asystujące.
• Role i nazwy elementów: Sprawdzasz, czy elementy mają odpowiednie role ARIA i etykiety.
• Kontrast kolorów: Możliwość sprawdzenia, czy kontrast między tekstem a tłem jest wystarczający.

Praktyczne zastosowanie:

• Poprawa dostępności strony: Identyfikacja problemów, które mogą utrudniać korzystanie ze strony osobom z niepełnosprawnościami.
• Weryfikacja atrybutów ARIA: Sprawdzenie, czy interaktywne elementy mają poprawnie zdefiniowane role i opisy.

 

Panel Sources (Źródła)

Panel Sources pozwala na przeglądanie i edycję plików źródłowych strony, takich jak CSS, JavaScript (choć JavaScript nie będzie naszym głównym celem w tej lekcji).

Funkcje:

• Przeglądanie plików: Możesz zobaczyć wszystkie pliki załadowane przez stronę.
• Edycja stylów CSS: Możesz modyfikować pliki CSS i zapisywać zmiany lokalnie.
• Ustawianie punktów przerwań: Choć głównie używane w JavaScript, punkty przerwań mogą być użyteczne przy debugowaniu dynamicznych zmian w CSS.

Praktyczne zastosowanie:

• Eksperymentowanie z kodem CSS: Możesz testować zmiany w plikach CSS i obserwować ich wpływ na stronę.
• Mapowanie źródeł (Source Maps): Jeśli używasz preprocesorów CSS (np. Sass), mapy źródeł pozwalają na debugowanie oryginalnego kodu.

 

Przykładowe scenariusze debugowania

1. Element nie jest wyświetlany poprawnie

Problem:

• Obrazek nie jest wyświetlany na stronie.

Kroki debugowania:

1. Sprawdź kod HTML:
   • W panelu Elements znajdź element <img> i sprawdź, czy atrybut src jest poprawny.
2. Sprawdź żądania sieciowe:
   • W panelu Network sprawdź, czy obrazek został poprawnie załadowany (czy nie ma błędu 404).
3. Sprawdź style CSS:
   • Upewnij się, że styl display nie jest ustawiony na none, a wartość visibility nie jest hidden.
4. Sprawdź model pudełkowy:
   • Upewnij się, że rozmiary elementu nie są zerowe.

2. Styl CSS nie jest stosowany

Problem:

• Zmiana stylu w pliku CSS nie wpływa na wygląd elementu.

Kroki debugowania:

1. Sprawdź specyficzność selektorów:
   • W panelu Styles zobacz, które style są stosowane do elementu i czy inne style ich nie nadpisują.
2. Sprawdź, czy plik CSS jest załadowany:
   • W panelu Network upewnij się, że plik CSS został poprawnie załadowany.
3. Sprawdź pamięć podręczną:
   • Odśwież stronę z pominięciem cache (Ctrl + F5 lub Cmd + Shift + R).
4. Sprawdź błędy w kodzie CSS:
   • Upewnij się, że w pliku CSS nie ma błędów składniowych, które mogą uniemożliwiać parsowanie stylów.

3. Element ma nieoczekiwane odstępy

Problem:

• Element ma dodatkowe marginesy lub paddingi, których nie przewidziałeś.

Kroki debugowania:

• Sprawdź model pudełkowy:
  • W panelu Elements wybierz element i sprawdź wartości margin i padding.
• Sprawdź dziedziczenie stylów:
• Upewnij się, że style nie są dziedziczone z elementów nadrzędnych.
1. Sprawdź reguły CSS:
   • W panelu Styles zobacz, które reguły wpływają na wartości margin i padding.

 

Dobre praktyki w korzystaniu z narzędzi deweloperskich

• Regularne korzystanie z narzędzi: Nawet jeśli strona działa poprawnie, warto używać narzędzi deweloperskich do optymalizacji i nauki.
• Eksperymentowanie: Nie bój się modyfikować kodu w narzędziach deweloperskich – zmiany są tymczasowe i nie wpływają na rzeczywistą stronę.
• Skróty klawiszowe: Poznaj skróty klawiszowe dla często używanych funkcji, co przyspieszy Twoją pracę.
• Konsola: Choć nie omawiamy JavaScriptu, warto wiedzieć, że konsola może wyświetlać błędy związane z CSS, np. nieprawidłowe selektory.

 

Częste błędy i jak ich unikać

• Nieodświeżanie strony po zmianach w kodzie źródłowym: Pamiętaj, że zmiany dokonane w narzędziach deweloperskich są tymczasowe. Po wprowadzeniu zmian w plikach źródłowych, odśwież stronę, aby je zobaczyć.
• Ignorowanie ostrzeżeń w konsoli: Przeglądarka może wyświetlać ostrzeżenia związane z nieprawidłowym użyciem CSS.
• Nadmierne zaufanie do narzędzi: Narzędzia deweloperskie są potężne, ale nie zastąpią solidnego testowania na różnych urządzeniach i przeglądarkach.

 

Podsumowanie

W tej lekcji nauczyliśmy się:

• Jak korzystać z narzędzi deweloperskich dostępnych w przeglądarkach internetowych.
• Jak debugować i profilować strony przy użyciu paneli takich jak Elements, Network, Performance i innych.
• Jak analizować i modyfikować kod HTML i CSS bezpośrednio w przeglądarce.
• Praktycznych technik do rozwiązywania typowych problemów z układem i stylami stron.
• Dobrze praktykować regularne korzystanie z narzędzi deweloperskich w celu optymalizacji i poprawy jakości kodu.

Narzędzia deweloperskie są niezbędnym elementem pracy każdego web dewelopera. Pozwalają na szybkie i efektywne rozwiązywanie problemów, co przekłada się na lepsze doświadczenia użytkowników i wyższą jakość tworzonych stron.

 

Zadania do samodzielnego wykonania

Eksperymentuj z narzędziami deweloperskimi:

• Otwórz swoją ulubioną stronę internetową.
• Użyj panelu Elements, aby zmodyfikować treść i style strony.
• Spróbuj zmienić kolor tła, czcionki, układ elementów.

Debugowanie własnej strony:

• Stwórz prostą stronę z kilkoma elementami HTML i stylami CSS.
• Wprowadź celowo błąd w stylach (np. literówkę w nazwie właściwości).
• Użyj narzędzi deweloperskich, aby znaleźć i naprawić błąd.

Analiza wydajności:

• Otwórz stronę z dużą ilością obrazków lub zasobów.
• Użyj panelu Network, aby sprawdzić, które zasoby najdłużej się ładują.
• Zastanów się, jakie techniki optymalizacji można zastosować, aby poprawić wydajność.

 

Ciekawostka

Czy wiesz, że możesz używać narzędzi deweloperskich do zdalnego debugowania stron na urządzeniach mobilnych? Na przykład, przy pomocy Chrome DevTools możesz podłączyć swój telefon z Androidem do komputera i debugować stronę otwartą na telefonie, co jest niezwykle przydatne przy optymalizacji stron responsywnych.