Tydzień 47

Ile można pisać console.log tu i console.log tam? Na początku nie przeszkadzało mi sprawdzanie stanu aplikacji za pomocą tej komendy dopisywanej tu i tam do kodu, ale zaczynam pisać bardziej rozbudowane apki i postanowiłem poszukać jakieś alternatywy.

Przede wszystkim używanie console.log nie jest złe. Pozwala na wyszukanie i naprawianie błędów w aplikacji. Prawdę mówiąc w żadnym z kursów na temat JS nie znalazłem informacji o tym, jak szukać błędów inaczej niż przy użyciu console.log. Mnie jednak brakowało narzędzia, które pozwoliło by mi zatrzymać kod w dowolnym momencie i zajrzeć na przykład do zmiennych, co tam siedzi w każdej z nich w danym momencie, albo nawet uruchamiać kod linijka po linijce.

Skoro edytor kodu VBA wbudowany w Microsoft Office posiada takie funkcjonalności, to na pewno narzędzia do pisania kodu w JS takie funkcjonalności posiadają. Tak sobie pomyślałem i zacząłem szukać. Ktoś mi kiedyś powiedział, że YouTube oprócz miliardów filmików o niczym, posiada niezliczoną ilość filmików z przydatną wiedzą. Jeżeli chodzi o wiedzę w obszarze IT to rzeczywiście tak jest. Bardzo szybko znalazłem informacje na temat wykorzystywania Google Chrome jako zaawansowanego debuggera. Kombinacja klawiszy Ctrl + Shift + I uruchamia narzędzie dla deweloperów wraz z consolą. To nic nowego, ale ta konsola posiada funkcjonalności, o które mi chodziło, a które są „ukryte”. Zakładka pod tytułem „Sources” posiada wszystkie narzędzia, jakich od dawna szukałem.

Print screen narzędzia dla developerów w Google Chrome.

Po pierwsze pozwala zatrzymać kod w każdym momencie. Możesz na przykład zaznaczyć przy jakim zdarzeniu kod ma się zatrzymać. Zakładka Event Listener Breakpoints pozwala nam bardzo łatwo to określić. Kiedy egzekucja kodu zostanie wstrzymana, linijka na której aktualnie jesteśmy podświetli się na niebiesko w górnym oknie. Teraz mamy kilka możliwych opcji: wykonanie kodu linijka po linijce, przejście do następnej funkcji, przejście do poprzedniej funkcji, przejrzenie stanu zmiennych lokalnych i globalnych oraz śledzenie wybranych zmiennych. Jak mi tego wszystkiego brakowało. Co więcej, jeżeli uznasz, że w aktualnie przeglądanym miejscu w kodzie nie ma błędu, możesz zaznaczyć dowolną linijkę kodu  i uruchomić egzekucję kodu do wskazanej linijki.

Kolejną fajną możliwością jest uruchamianie poleceń takich jak na przykład typeof w zakładce Watch. Pozwala ona na zbadanie zawartości interesującej nas zmiennej w konkretnym momencie wykonywania kodu. Ile razy do tej pory zastanawiałem się, dlaczego jakaś operacja na zmiennej nie udaje mi się. Używałem do tego console.log w kilku miejscach i zajmowało mi mnóstwo czasu rozgryzanie stanu zmiennej. Teraz mogę to robić dużo szybciej.

Kolejną fajną sprawą jest to, że w momencie zatrzymania kodu, mamy dostęp do consoli i możemy wykonywać operacje na wszystkich zmiennych, które aktualnie znajdują się w stosie. Możemy również, poprawić nasz kod w górnym okienku i zapisać go za pomocą ctrl + s a następnie uruchomić od wskazanego miejsca, żeby się przekonać czy wprowadzane poprawki przyniosły spodziewany rezultat.

Bardzo się cieszę, że udało mi się odnaleźć informacje o tym jak szukać błędów w bardziej efektywny sposób. Jeżeli Ty też masz dość używania consol.log jako sposobu na wyłapywanie błędów, również polecam przesiadkę na Google Chrome DevTools. Możesz również sprawdzić tego typu narzędzia w swoim edytorze kodu. Ja jednak uważam, że dzisiaj pracuje na edytorze X jutro mogę pracować na edytorze Y, a Google Chrome DevTools raczej będzie na topie tak długo, jak długo będzie najpopularniejszą przeglądarką wśród użytkowników.

Na koniec podsumowanie tygodnia. Przede wszystkim pracuję nad ostatnią aplikacją w kursie Java Script. Kolejne ciekawe wiadomości wpadają, przede wszystkim o generowaniu treści na stronę w zależności od stanu aplikacji. Na naukę udało mi się przeznaczyć osiem i pół godziny.

No comments
Krzysztof NyrekTydzień 47

Related Posts

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *