Wszystko, co musisz wiedzieć o konsoli programisty

Dobry profesjonalista zna swoje narzędzia. Jednym z głównych narzędzi, jakimi dysponują deweloperzy WordPressa, jest konsola programisty JavaScript zawarta w naszych przeglądarkach. W tym poście zobaczymy wszystko, co musisz wiedzieć o konsoli programisty przeglądarki, wraz z kilkoma sztuczkami i ciekawostkami, o których być może nie wiedziałeś.

Jak uzyskać dostęp do konsoli programisty

Po pierwsze: zobaczmy, jak otworzyć konsolę programisty przeglądarki. Jeśli jesteś użytkownikiem przeglądarki Firefox, po prostu kliknij menu (prawy górny róg) i poszukaj opcji Web Developer , jak widać poniżej:

Następnie wybierz Konsola internetowa :

a konsola pojawi się w Twojej przeglądarce, jak widać na poniższym zrzucie ekranu. Pamiętaj, że istnieje możliwość skonfigurowania miejsca, w którym panel ma się dokładnie pojawiać. Możesz nawet ustawić go tak, aby pojawiał się w osobnym oknie (co jest bardzo przydatne, jeśli używasz wielu monitorów).

Z drugiej strony, jeśli jesteś użytkownikiem Chrome, procedura jest bardzo podobna. Wystarczy wejść do jego menu, wybrać Więcej narzędzi , a następnie Narzędzia programistyczne :

Jak korzystać z konsoli programisty

Konsola JavaScript naszej przeglądarki jest niezwykle pomocna w debugowaniu naszego kodu, sprawdzaniu, co rejestrują nasze skrypty, uruchamianiu małych poleceń i obserwowaniu ich efektów w sieci w czasie rzeczywistym. Jako twórca wtyczek do WordPressa, głównym narzędziem, jakie ma dla mnie konsola, jest oczywiście debugowanie, więc zobaczmy szczegółowo, co dokładnie oferuje.

#1 Różne poziomy dziennika

Pierwszym powodem, dla którego programista zwykle otwiera konsolę JavaScript, jest debugowanie swojego kodu. Gdy wystąpi błąd lub coś ulegnie awarii, prawdopodobnie znajdziesz informacje o tym w konsoli. Możesz nawet uruchamiać własne wiadomości informacyjne, ostrzeżenia lub błędy, kiedy tylko chcesz!

Na poprzednim zrzucie widzimy na przykład, że obiekt console (obiekt globalny, którego celem jest pomoc w debugowaniu kodu) ma różne metody pisania komunikatów w konsoli:

• debug i log pokazują zwykłe komunikaty.
• info wyświetla komunikaty informacyjne. W przeglądarce Firefox wyświetlają ikonę „informacje” obok wiadomości.
• warn wyświetla ostrzeżenia, zwykle wskazując na problem lub coś, co nie jest do końca właściwe. Zazwyczaj jest podświetlony na żółto z ikoną ostrzeżenia.
• error jest zwykle zarezerwowany dla najpoważniejszych błędów (czyli rzeczy, które naprawdę zawiodły). Jest pokazany na czerwono, a także drukuje ślad stosu (czyli jaka funkcja wygenerowała błąd i wszystkie jej wywołujące).

Zaletą korzystania z różnych poziomów dziennika jest to, że w dowolnym momencie możemy wybrać, jakie komunikaty chcemy wyświetlać. Na przykład na poniższym zrzucie ekranu dezaktywowaliśmy komunikaty informacji i debugowania :

#2 Czasy realizacji monitorowania

W agile często słyszysz: „zrób to dobrze, spraw, by to działało szybko”. Po napisaniu kodu „aby to zadziałało”, nie jest nieprawdopodobne, że wynik będzie powolny i nieefektywny. Kiedy tak się dzieje, ważne jest, aby określić, gdzie są wąskie gardła i je rozwiązać.

Chociaż istnieją narzędzia, takie jak profilery, które pozwalają znaleźć winowajców i bardzo szczegółowo zrozumieć, co dzieje się pod maską, czasami potrzebujemy rozwiązania „szybkiego i brudnego”. Oznacza to, że po prostu chcemy zidentyfikować najwolniejszą funkcję w naszym kodzie… a proste liczniki czasu są świetne w tym zadaniu!

Jeśli chcesz wiedzieć, ile czasu zajmuje wykonanie określonego fragmentu kodu, uruchom licznik czasu na początku kodu ( console.time ) i zatrzymaj go ( console.timeEnd ) po zakończeniu kodu:

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Gdy kod osiągnie timeEnd , zobaczysz czas potrzebny do uruchomienia:

 Timer: 655ms - timer ended

Zauważ, że kiedy uruchamiamy i zatrzymujemy timer, nadajemy mu nazwę (w moim przykładzie „Timer”). Dzieje się tak, ponieważ możemy utworzyć tyle liczników, ile chcemy, każdy z własną nazwą i uruchomić je wszystkie jednocześnie.

# 3 Liczniki automatyczne

Jeśli interesuje Cię kontrolowanie liczby wykonań dowolnej funkcji w kodzie lub rejestrowanie liczby uruchomień pętli, użyj console.count . Za każdym razem, gdy funkcja jest wykonywana, otrzymasz w konsoli nowy log z aktualną wartością licznika:

#4 Jak sformatować swoje dzienniki

Logi są tutaj, aby pomóc nam zrozumieć, co dzieje się z naszym kodem. Ale jest to możliwe tylko wtedy, gdy piszemy logi, które później możemy zrozumieć…

Ciągi tekstowe

Na początku tego postu pokrótce omówiłem wszystkie dostępne w console metody logowania. Przykłady, które udostępniłem, wydrukowały zwykły tekst. To znaczy to stwierdzenie:

 console.log( 'Hello world!' );

wydrukowałem ten tekst:

 Hello world!

A jeśli zamiast tego chcielibyśmy wydrukować obiekt? Cóż, to:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

staje się tym:

Ale co, jeśli chcemy rejestrować wiele rzeczy? Czy musimy używać wielu wywołań console.log ? Cóż, odpowiedź brzmi nie, nie jest to konieczne. Możemy zarejestrować wszystko, co chcemy za pomocą jednego połączenia:

Grupowanie dzienników…

Kiedy zaczynamy mieć dużo logów w naszym kodzie (jak na przykład tutaj):

wynik może być nieco mylący, ponieważ wszystkie dzienniki są scalane w jeden strumień tekstu:

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

Na szczęście obiekt console oferuje kilka metod rozwiązania tego problemu: group i groupEnd . Dzięki nim możemy grupować nasze komunikaty dziennika. Po prostu utwórz grupy (na przykład jedną grupę na funkcję):

i pokażą się tak:

Stoły

Kiedy pracujemy ze zbiorami danych, nie zawsze łatwo jest je zwizualizować. Na przykład wyobraź sobie, że mamy listę przedmiotów, takich jak poniższa:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Jeśli je console.log , to otrzymujemy:

co jest mniej więcej w porządku, dopóki nie będziemy mieli więcej obiektów z większą liczbą pól. W obliczu tego typu struktury danych do logowania polecam użyć console.table :

#5 Jak poprawnie wyświetlać typy złożone (obiekty i tablice)

Na koniec chciałbym zakończyć dzisiejszy post czymś, o czym niewielu programistów wie… Powiedzmy na przykład, że pracujesz nad projektem i chcesz zobaczyć, jaka jest wartość obiektu przed i po jego aktualizacji. Aby to zrobić, jest prawdopodobne, że zapiszesz zmienną console.log przed wprowadzeniem zmiany i później, jak widać w następującym pliku GIF:

W poprzednim przykładzie rejestrujemy obiekt, który zawiera wartość ustawioną na 1. Następnie aktualizujemy wartość do 200 i ponownie rejestrujemy obiekt. Można by się spodziewać, że pierwszy dziennik zawsze będzie pokazywał pierwotną wartość (1), ale zauważ, jak rozszerzając obiekt, faktycznie pokazuje nową wartość 200. Co się dzieje?

Zasadniczo komunikat dziennika ma odniesienie do obiektu i dlatego, gdy go rozwiniemy, pokazuje nam obiekt taki, jaki jest teraz, a nie taki, jaki był w momencie tworzenia dziennika. Cholerna zmienność!

Aby rozwiązać ten problem, po prostu wyślij kopię do dziennika (biblioteki takie jak lodash i jego metoda cloneDeep bardzo to ułatwiają). W ten sposób pierwszy zarejestrowany obiekt będzie kopią, której nie będzie można zmutować (ponieważ nie będziesz miał do niego odniesienia):

I to wszystko na dziś! Mam nadzieję, że podobał Ci się ten post. Jeśli chcesz uzyskać więcej informacji o wszystkim, co możesz zrobić z console , zapoznaj się z dokumentacją w MDN. Nie zapomnij podzielić się nim ze znajomymi? A jeśli zrobisz coś innego lub masz jakąś radę do podzielenia się z naszymi czytelnikami, zostaw nam komentarz ?

Imagen destacada Tim van der Kuip na Unsplash.