debugger

Tworząc strony jednym z nieodłącznych narzędzi, które powinno nam towarzyszyć jest debugger. Aby go włączyć naciskamy klawisz F12 w przeglądarce. Alternatywą jest kliknąć prawym przyciskiem myszy na dowolny element na stronie i wybrać z okienka "Zbadaj element" (inspect) lub nacisnąć klawisze Ctrl + Shift + I.
W niektórych przeglądarkach powyższa metoda może się nieco różnić (np. w Safari trzeba wcześniej włączyć narzędzia developerskie).

Co nam daje taki debugger?
Za jego pomocą możemy dowolnie badać i modyfikować strony, edytować html, zarządzać schowkiem strony, ciasteczkami, zmieniać style elementów, sprawdzać czemu dane elementy źle się wyświetlają, rozwalać strony itp. W skrócie można powiedzieć, że to taki radar, bez którego w zasadzie nie ma co podchodzić do tworzenia stron.

Poniżej postaram się opisać kilka z ważniejszych zakładek debuggera w przeglądarce Chrome. Przy czym nie jest to żadna zniewaga dla innych przeglądarek. Taki dla przykładu debugger z Firefoxa też jest mega narzędziem, i można o nim napisać nie jedną książkę. W wielu momentach działa lepiej niż ten z Chroma (np. przy debugowaniu Grida, czy Accesibility (1, 2, 3))

Zakładka Console

Zakładka console służy do wypisywania komunikatów, testowania kawałków kodu itp.
Możemy ją odpalić poprzez przejście na zakładkę Console w debuggerze, lub będąc na innych naciskając klawisz Esc.
W naszych skryptach bardzo często będziemy chcieli coś wypisać - np. jakiś komunikat, daną zmienną,element czy inną rzecz. Skorzystamy wtedy z instrukcji console.log, która służy do wypisywania w konsoli:

//możemy wypisywać teksty, liczby itp.
console.log("Witaj świecie");

//możemy wypisać obiekt i go zbadać
console.log(window);

//po przecinku możemy wypisać kilka elementów na raz
console.log("Witaj", window, 100);

W wielu miejscach - nawet na tym kursie - będziesz chciał szybko sprawdzić działanie jakiegoś skryptu lub zmiennej.
Wystarczy więc, że otworzysz debuggera (F12) i przejdziesz do zakładki Console.
Jeżeli skrypt udostępnia jakieś zmienne lub funkcje, możesz w konsoli zacząć wpisywać ich nazwy, a debugger podpowie ci resztę.

Na stronie, którą właśnie czytasz stworzyłem mikro skrypt z tajemniczą zmienną. Przejdź teraz do konsoli debuggera i zacznij wpisywać mojaPie.

debugger powinien podpowiedzieć tobie pełną nazwę zmiennej mojaPierwszaSuperZmienna.
Strzałka w prawo by dopełnić wpisywaną nazwę i enter by wyświetlić w konsoli jej wartość.
W konsoli powinna pojawić się wartość tej zmiennej, czyli jakiś tekst. Jaki? Sprawdź sam. Podobnie możesz zacząć wpisywać window, Math czy podobne globalnie dostępne elementy.

Nie wszystkie zmienne będziemy mogli tak badać. Jeżeli dana zmienna jest ukryta przed zewnętrznym środowiskiem (1), nie zbadamy jej w powyższy sposób. Ale wtedy spokojnie możemy użyć console.log() bezpośrednio w kodzie.

Istnieją też inne instrukcje, które udostępnia nam obiekt console:

//bardzo często będziemy chcieli wypisać element by go zbadać.
//gdy wypiszemy element pobrany ze strony, w konsoli pokaże nam tylko html znacznika. Gdy chcemy wypisać więcej detali o tym obiekcie to użyjemy console.dir

console.dir(someButton);

//pokaże w konsoli ładnie sformatowaną tabelę
console.table([1,2,3,4,5]);

//grupowanie wielu tekstów (console.log etc) w konsoli w jedną grupę
console.group("Nazwa grupy");
console.log("Ala ma kota");
console.log("Kot ma Alę");
console.groupEnd(); //kończenie grupy


console.groupCollapsed("Nazwa grupy"); //grupa domyślnie zwinięta
console.log("Ala ma kota");
console.log("Kot ma Alę");
console.groupEnd(); //kończenie grupy

//czasami będziemy chcieli sprawdzić jak szybko wykona się nasz skrypt...
console.time("test 1"); //rozpoczyna test - zaczyna liczyć czas
for (let i=0; i<10000; i++) {
    ...
}
console.timeEnd("test 1"); //kończy test

//czasami też będziemy chcieli zatrzymać na chwilę działanie skryptu w danym miejscu
function test() {
    let i = 0;
    debugger; //instrukcją debugger przerywam działanie skryptu w tym miejscu, dzięki czemu mogę spokojnie go badać w zakładce Source. Dodatkowo w konsoli mam dostęp do zmiennych z danego scope - np. je tam wpisując
}
test();

Ważną cechą console.log jest to, że możemy w niej wypisywać naście elementów po przecinkach. Dzięki temu nie będziemy musieli się skupiać na typach:

const myArr = [];

//zamiast
console.log("Moja tablica: " + myArr);

//lepiej użyć
console.log("Moja tablica:", myArr);

//lub
console.log({myArr : myArr});

Zresztą wklej sobie powyższy kod do konsoli i sprawdź sam.

Szczególnie ta ostatnia opcja jest przydatna. Wystarczy wpisać w kodzie console.log ze zmienną którą chcemy wypisać. Następnie zaznaczamy tą zmienną, naciskamy klawisz { (lewa klamerka) co spowoduje, że nasza zaznaczona zmienna zostanie objęta klamrami. dzięki temu w konsoli wypisze się wartość zmiennej z jej nazwą:

    let zm = "Ania ma kota";
    console.log(zm); //zaznaczam zm (2x klik na nazwę) i naciskam {
    console.log({zm}); //{zm : "Ania ma kota"}

Ma to znaczenie przy dłuższych skryptach. Dzięki temu trikowi będziemy wiedzieli czego tyczy się wypisana w konsoli wartość.

A jak już jesteśmy przy ułatwianiu sobie pracy... Dla Visual Studio Code istnieje bardzo fajny dodatek zwący się ES6 Snippets. Po jego zainstalowaniu dostaniemy dodatkowe skróty w kodzie (odpalane klawiszem Tab). Dla konsoli dwa najczęściej używane to clg i clo.

A co dla Webstorma? Dla niego nic nie trzeba instalować. Wystarczy na końcu linii którą chcemy wypisać dopisać .log i nacisnąć klawisz Tab. Dana linia zostanie owinięta console.log.

Konsola pozwala nam też używać dodatkowych znaków formatujących, które dają nam jeszcze więcej możliwości:

console.log("Jestem zwykłym tekstem w konsoli");
console.log("%cJestem zwykłym tekstem w konsoli", "font-weight: bold; color: rebeccapurple; font-size: 30px; background: gold;");
console.log("Kot %s lubi się bawić", "Rysiek"); //Kot Rysiek lubi się bawić
console.log("Cena tego produktu to %dzł", 120); //Cena tego produktu to 120zł
console.log("%cCena tego produktu to %dzł", "color: red; font-weight: bold", 120);

Poza wypisywaniem tekstu w konsoli warto w tej zakładce zwrócić uwagę też na mały trybik w prawym górnym rogu tej zakładki.

Po jego kliknięciu ukaże nam się kilka opcji, które służą do pokazywania lub ukrywania dodatkowych informacji. Wśród nich na szczególną uwagę zasługuje opcja Preserve log, która po aktywowaniu spowoduje, że po przeładowaniu/zmianie strony w danej zakładce konsola nie będzie się automatycznie czyścić, a teksty będą doklejane do tych co już w niej są. Mega przydatna opcja przy pracy z formularzami.

Zakładka Elements

Poza konsolą będziemy bardzo często korzystać z innych zakładek.
Pierwszą z nich jest zakładka Elements, która pozwala badać i zmieniać całą strukturę dokumentu.

Po lewej stronie znajduje się drzewo dokumentu (html), natomiast po prawej style badanego elementu oraz kilka przydatnych zakładek.

Badany element możemy wybrać na kilka sposobów.

Po pierwsze - wybierzemy go klikając zwyczajnie w widoczny w tej zakładce dokument html. Możemy się po nim poruszać klikając na poszczególne elementy drzewka, lub posługując się strzałkami klawiatury (góra-dół, prawo-lewo).

Drugi sposób to użycie pierwszej z lewej strony górnej belki debuggera ikonki.

Po jej wybraniu trzeba zaznaczyć badany element na stronie. W ostatnich wersjach Chrome opcja ta ma szczególne znaczenie, ponieważ po użyciu jej i wskazaniu danego elementu pokazywany jest dodatkowy popup z informacjami o kontraście danego elementu. Bardzo ważna sprawa jeżeli chcemy robić dobre strony.

Trzeci sposób - mój ulubiony - to kliknięcie badanego elementu na stronie prawym klawiszem myszki i wybranie opcji "zbadaj". Wydaje się najbardziej wygodną, przy czym najlepiej po prostu przećwiczyć sobie używanie wszystkich trzech zamiennie.

Poza drzewem dokumentu zakładka Elements pokazuje po prawej stronie style każdego elementu. Style pokazywane są od dołu do góry. Te najbardziej aktualne powinny pojawiać się na górze tej listy.

Na szarym tle pokazywane są style domyślne przeglądarki. Jeżeli któraś z właściwości będzie przekreślona, znaczy to, że inny selektor w css ją nadpisał bo ma większą moc (1, 2). Czasami przy niektórych właściwościach mogą pojawić się wykrzykniki. Oznacza to, że wartość dla danej właściwości została źle napisana (podaliśmy błędną składnię).

Po kliknięciu każdej właściwości po prawej stronie możemy ją dynamicznie zmieniać. Przy wartościach numerycznych możemy je zwiększać lub zmniejszać za pomocą klawiszy strzałek góra-dół. Wystarczy postawić kursor na danej wartości i strzałkami góra-dół zmienić jej wartość (z shiftem taka zmiana następuje co 10).

Przy niektórych właściwościach pojawiają się dodatkowe ikonki - np. służąca do wyboru koloru, lub do zmiany box-shadow.

Na powyższym screenie zobaczysz też miejsce oznaczone element.style {}. Miejsce to służy do chwilowego dodawania nowych styli do elementu. Przydaje się jeżeli chcemy sprawdzić jak dana właściwość działa na element (np. dodać na szybko kolor tła, zmienić wielkość fonta). Klikając w to miejsce zaczniemy wpisywać właściwości. Ich edycja jest podobna do właściwości wypisanych poniżej tej opcji.

Kolejną bardzo ważną opcją jest :hov, który mieści się na górze z prawej strony tej zakładki.

Umożliwia ona wymuszenie stanu na elemencie - np. hover, focus, active itp.

Po wybraniu danego stanu, tuż poniżej na liście styli pojawią się style przypisane do tego stanu (jeżeli oczywiście istnieją).

Po lewej stronie zakładki Element znajduje się HTML. Gdy klikniesz prawym przyciskiem myszy na wybrany element, pojawi się menu kontekstowe.

Warto przejrzeć opcje z tego menu. Można w nim znaleźć edycję HTML, edycję atrybutów elementu, usuwanie czy ukrywanie danych elementów. Bardzo przydatna rzecz, gdy chcemy pozbyć się danego elementu (np. informacji o zapisie do newslettera której się nie da ukryć).

Spróbuj przetestować te opcje i pousuwać kilka elementów z tej strony.

Zakładka Sources

Kolejną zakładką jest Sources. Znajdziesz tutaj używane zasoby - np. pliki ze skryptami, stylami, użyte grafiki itp. Jest to główna zakładka, której będziemy używać przy debugowaniu naszych skryptów.

Po lewej stronie tej zakładki masz listę plików. Po wybraniu danego pliku, zobaczysz jego kod. Jeżeli dany kod jest zminimalizowany (co w dzisiejszych czasach zdarza się bardzo często), możemy skorzystać z ikonki Pretty print, która znajduje się na dole.

Patrząc na kod JavaScript w zakładce Source możemy klikając na numerach danych linii, by postawić w danym miejscu tak zwane breakpointy. Po odświeżeniu strony lub wykonaniu zdarzenia wykonywanie kodu zatrzyma się we wskazanych miejscach.
Od tej pory będziemy mogli badać każdą zmienną w kodzie. Wystarczy najechać na nią kursorem.

Takie rzeczy będziemy robić w rozdziale o debugowaniu kodu.

Zanim tam jednak przejdziemy dalej, mikro test. Znajdź w zakładce Sources plik test-debugger.js (jest w katalogu kurs/debugger) i postaw tam kilka breakpointów. Następnie odśwież stronę i spróbuj pobadać kilka zmiennych.

Po postawieniu breakpointów na liniach, odświeżeniu strony wykonywanie skryptu się zatrzyma, a sama strona zostanie przykryta szarym tłem. Zatrzymane miejsce będzie reprezentować niebieska linia w kodzie w zakładce Sources.

W przyszłości zapewne będziesz o wiele częściej korzystał z tej zakładki. Polecam ci przejść tutorial na stronie https://developers.google.com/web/tools/chrome-devtools/javascript/, który fajnie naucza korzystania z tej zakładki.

O samym debugowaniu i prawej części tej zakładki pouczymy się w jednym z kolejnych rozdziałów, a tym czasem...

...to nie koniec. Tym razem przechodzimy na lewą stronę zakładki Sources.

Na górze tej części mamy kilka zakładek. W zakładce Page wymienione są wszystkie rzeczy, których używa nasza strona. Ale to już wiemy, bo właśnie jej używaliśmy.

Jeżeli pracujemy nad stroną na naszym komputerze, w zakładce Filesystem będziemy mogli dodać folder, w którym się ona znajduje na naszym dysku. Dzięki temu zmiany dokonywane za pomocą debuggera, będą wprowadzane bezpośrednio do edytora w którym pracujemy. Nie tylko będziemy mogli edytować kod w zakładce source (trzeba go zapisać za pomocą Ctrl + S), ale też każda zmiana stylów w zakładce Elements zostanie wprowadzona bezpośrednio do plików.
Gdy wejdziemy w tą zakładkę, musimy wybrać folder, w którym mamy stronę nad którą pracujemy. Zostaniemy zapytani, czy zezwalamy na zapis (pytanie pojawi się na górze okna przeglądarki).
Osobiście nie nadużywam tej funkcjonalności, bo jakoś nie mam do niej zaufania. Możliwe, że w przyszłości się do niej przekonam...

Podobne działanie ma zakładka Overrides, z tym, że możemy w niej nadpisywać skrypty i strony na stronach zewnętrznych.

Pozostałe zakładki Content Script i Snippets zawierają skrypty odpalane np. przez używane przez nas dodatki, ale też Snippety, czyli kawałki kodu, które możemy sobie zapisać do późniejszego użytku (ale to samo spokojnie możesz robić w swoim edytorze).

Zakładka Network

Skoro tak dobrze nam idzie omawianie zakładek, przechodzimy do kolejnej.

Zakładka Network służy do badania requestów, czyli zapytań do zasobów. To właśnie tutaj możemy zbadać ile requestów musi być wykonane by nasza strona została wczytana (im mniej tym lepiej).
Dodatkowo możemy badać każdy request z osobna. Będziemy to robić szczególnie w dziale o ajaxie czy ciasteczkach.

Ciekawą opcją w tej zakładce jest możliwość symulowania wolnych łączy lub braku połączenia. Dzięki temu możemy sprawdzić jak nasza strona będzie się wczytywać na wolnych łączach.

Bardzo ważną opcją jest też opcja preserve log, którą znajdziesz na belce tej zakładki. Działa ona podobnie do tej z zakładki Console, co oznacza, że po jej zaznaczeniu dane z konsoli nie będą czyszczone po odświeżeniu strony, a tylko doklejane do widocznych.

Dodatkowo na górze tej zakładki znajdują się opcje pozwalające filtrować requesty. Przydatne gdy chcemy np. wyszukać tylko pliki ze stylami dołączonymi do strony.

Zakładka Application

Zakładka Application pozwala nam badać różne miejsca gdzie przechowywane są dane dostępne dla strony. I tak możemy tutaj zbadać czy usunąć ciasteczka czy dane z localStorage. Będziemy tutaj zaglądać w działach z localStorage czy ciasteczkami.

Zakładka Audits / Lighthouse

Kolejna zakładka jaką chciałbym omówić to zakładka Audits (w nowych wersjach Chrome jej nazwa została zmieniona na Lighthouse).

Istnieje taka strona jak https://developers.google.com/speed/pagespeed/, która służy do sprawdzania strony pod względem dostępności, szybkości wczytywania itp.

Po jej użyciu dostaniemy raport, który będzie zawierał różne porady co powinniśmy poprawić na naszej stronie.

Raportu takiego nie należy traktować jako wyznacznika dobrej strony. To tylko porady jak zoptymalizować działanie naszej strony. Czasami lepsze, czasami gorsze. 100 pkt wcale nie będzie oznaczać, że nasza strona jest idealna i z pewnością odniesie sukces. 100pkt oznacza, że na Google PageSpeed uzyskaliśmy maksimum punktów. Nic więcej, nic mniej.

Ale też warto korzystać z takich stron. Czasami zapomnimy o minimalizacji skryptów, o optymalizacji CSS, o zmniejszeniu wagi grafik itp. Google page speed może nam o tym przypomnieć.

W zakładce Audits możemy przeprowadzić podobne sprawdzenie i dostaniemy całkiem podobne wyniki - nie tylko tyczące się optymalizacji, ale też dostępności czy bezpieczeństwa.

Zakładka perfomance

Zakładka perfomance służy do badania strony pod względem wydajności. W jej lewym górnym rogu znajduje się przycisk nagrywania. Włączamy nagrywanie, odświeżamy stronę lub chwilę po niej chodzimy i zatrzymujemy nagrywanie.

Naszym oczom powinna pojawić się linia czasu z rozrysowanymi wykresami jak wyglądało renderowanie naszej strony, a które możemy badać jeżeli zależy nam na optymalizacji renderowania naszej strony.

Dobrze pokazuje to ten film: https://youtu.be/0Xg6r_MKGJ4?t=1066 i ten artykuł

Dodatkowe narzędzia

O debuggerze można by napisać całkiem sporą książkę, bo narzędzie to ma pełno ukrytych funkcjonalności. Aby zobaczyć niektóre z nich, wystarczy kliknąć 3 kropeczki w prawym górnym rogu debuggera i wybrać opcję "More tools".

Można też posłużyć się skrótem klawiszy Ctrl + Shift + P, który otworzy okienko do wyszukiwania/odpalania rzeczy w debuggerze (podobny skrót ma podobną funkcjonalność w wielu edytorach - np. VSC, Atom czy Sublime Text)

Wśród dodatkowych ciekawych narzędzi warto spojrzeć na:

• Animation - zakładka, która służy do badania animacji na stronach
• Coverage - zakładka pokazująca procent nieużywanych styli i javascript
• Rendering - zakładka, która służy do sprawdzania jak rysowana jest nasza strona (sprawa tyczy się optymalizacji renderowania naszej strony), oraz pozwala włączyć licznik FPS
• Show coverage - narzędzie pokazujące ile naszych stylów / js jest realnie używane w danym momencie na danej stronie. Dzięki temu możemy spróbować je trochę zmniejszyć