?

Cześć!

(naciśnij spację, żeby kontynuować)

Grafika zapożyczona z serwisu awwmemes.com

Debugowanie

Dziś porozmawiamy o diagnozowaniu błędów.

Ale najpierw: czy istnieje program komputerowy,
który jest w 100% bezbłędny?

Jak zatem diagnozować błędy?

Grafika zapożyczona z serwisu www.publicdomainpictures.net

Narzędzia programisty!

Prawie każda przeglądarka internetowa ma w sobie bardzo zaawansowane narzędzia, które pomogą nam zrozumieć z czego składa się strona i w jaki sposób ona działa.

A konkretnie:

  • Konsola: tam na bieżąco pojawiają się komunikaty o błędach
  • Debugger: można sprawdzić krok po kroku, jak działa nasz skrypt
  • Sieć: można sprawdzać komunikację z serwerem
  • Bardziej zaawansowane narzędzia: profiler, analiza stosu, audyty itp

Konsola

Grafika zapożyczona z flickr.com;

Po co jest konsola?

Można tam wpisywać fragmenty kodu, żeby sprawdzić, co one robią.

Taki kod zostanie natychmiast wykonany przez przeglądarkę.

Można też wypisywać potrzebne dane.

W konsoli pojawiają się również komunikaty o błędach!

Przykładowe błędy

Reference Error
Próba odczytania własności nieistniejącego obiektu

Zauważyłaś, że użyliśmy console.log?

Obiekt console służy programistkom do śledzenia różnych rzeczy w tworzonym programie

console posiada więcej metod, niż tylko log. Inne metody umożliwiają wypisywanie na konsolę błędów (error) i ostrzeżeń (warn), grupowanie komunikatów, wypisywanie informacji w tabelkach, mierzenie czasu pomiędzy wywołaniami itp. Pełny opis znajdziesz tutaj.

Zabawa z konsolą!

Wypisz w konsoli informację (console.log), ostrzeżenie (console.warn) oraz błąd (console.error). Następnie stwórz jakiś obiekt lub tablicę i wypisz jej zawartość do konsoli, używając metody console.table.

Hurra!
Grafika zapożyczona z serwisu giphy.com

No dobra, ale co z błędami?

One też będą pojawiać się w konsoli, jeśli się trafią.

Spróbuj zaobserwować jakieś błędy!

Otwórz (najlepiej w osobnej zakładce) plik z przykładowym kodem, a następnie otwórz tam narzędzia deweloperskie.

Anatomia błędu

Type Error
Próba uruchomienia metody nieistniejącego obiektu

Spróbuj kliknąć nazwę pliku
w komunikacie błędu

Co się wydarzyło?

Narzędzia otworzyły się na zakładce "Sources"!

Linia powodująca błąd została wyróżniona :-)
Źródło błędu!

Zakładka "Sources" ("Źródła") pozwala przeglądać kod, z któego składa się badana strona internetowa, plik po pliku, tak jak programista to ułożył. Ale nie jest to jej jedyna funkcja...

Debugger

Ghost Busters!
Grafika zapożyczona z artykułu w Forbes

Gdy konsola nie wystarcza

Bywa, że wypisywanie różnych rzeczy w konsoli nie daje oczekiwanych efektów. Spróbuj przeanalizować taki kod:

  let podgladanyObiekt = {
    level: 1,
    data: {
      level: 2,
      data: 0
    }
  };

  for (let i = 0; i < 10; i++) {
    podgladanyObiekt.data.data = i;
    console.log(podgladanyObiekt.data);
  }

Wklej kod z poprzedniego slajdu do konsoli i go uruchom. Popatrz, co pojawiło się w konsoli. Czy zauważyłaś coś dziwnego?

Wartości data są niespójne :-O

No to w końcu 0 czy 9?

Wartość zależy od tego, kiedy się ją ogląda!?!

No to w końcu 0 czy 9?

Co tu się odjavascriptowiło?

Wartości wypisywane w trakcie trwania pętli wyglądają dobrze, ale po zakończeniu pętli obiekt jest w swoim stanie końcowym. W efekcie, jeśli klikniesz w konsoli, żeby rozwinąć pełny widok obiektu, wartości pól będą odzwierciedlać stan końcowy, a nie stany pośrednie.

W podanym tutaj przykładzie nie wygląda to jak duży problem, bo faktyczne wartości i tak pojawiły się w konsoli, dzięki użyciu API console. Niestety w wielu przypadkach nie jest możliwe dodanie wpisów console.log.

Jak to obejść?

Trzeba pomyśleć
Grafika zapożyczona z serwisu giphy.com

Do tego potrzebny jest debugger

  • W zakładce "Sources" znajdź kod, który potrzebujesz zbadać
  • Klikając obok numerów linii stwórz breakpointy
  • Uruchom kod i zobacz, co się dzieje :-)

Debugger w akcji

Dzieje się!

Co debugger umie?

  • Przerywanie wykonania kodu w dowolnym momencie
  • Podświetlenie kodu, który jest w danej chwili wykonywany
  • Śledzenie wartości zmiennych
  • Sprawdzanie zakresów zmiennych
  • Sprawdzanie stosu wywołań
  • Podglądanie funkcji obsługujących zdarzenia
  • ...

Czas na praktykę!

Pobierz paczkę z przykładową appką. Po rozpakowaniu sprawdź, czy działa ;-)

Ups...

No i klops.

Pamiętasz, że w komunikaty o błędach można klikać? Zrób to teraz i zobacz, gdzie zostaniesz przeniesiona!

Zakładka "Sources"

Trafiłaś ponownie do zakładki z debuggerem. Linia powodująca błąd jest podkreślona na czerwono.

Załóż na tej linii breakpoint i przeładuj stronę. Co się wydarzyło?

Okazuje się, że zmienna nav ma wartość null. To chyba nie jest dobrze. Ona powinna zawierać coś innego - tworzona jest takim kodem:


  let nav = document.querySelector('nav > ul');
          

Przy pomocy document.querySelector można znajdować elementy strony w drzewie dokumentu. Ta zmienna powinna zawierać jakiś element.

Czy to możliwe, że w momencie wykonania kodu JS poszukiwany element po prostu jeszcze nie istnieje? Jeżeli rzeczywiście tak jest, jak można sobie z tym poradzić?

Zajrzyj do pliku index.html z paczki z zadaniem. Zwróć uwagę, w którym miejscu wczytywane są skrypty. Spróbuj przenieść je w inne miejsce dokumentu i sprawdź, co się będzie działo.

Przeniesienie elementu <script src="gallery.js></script> na koniec dokumentu, tuż przed tag zamykający </body>, rozwiązało problem!

Sukces!

Znajdź inne błędy w przykładzie i postaraj się je samodzielnie naprawić. Nie martw się, jeśli Ci nie idzie - nasi trenerzy chętnie pomogą!

Zrobione!

We did it!

Podsumowanie

Podstawowym narzędziem do tropienia błędów są narzędzia deweloperskie w przeglądarce.

Narzędzia zapewniają dużo informacji o napotkanych błędach oraz oferują pomoc w ich rozwiązaniu.

Nawet jeśli w konsoli nie widać błędu, to nie znaczy, że wszystko działa poprawnie ;-)

Wniosek: nie bój się popełniać błędów - teraz już będziesz umiała je naprawić! ;-)

To już wszystko, co przygotowaliśmy na dzisiaj. Dzięki za wspólnie spędzony czas i do zobaczenia!