Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 1/ 1Zaawansowane debugowanie JavaScript i Node.js
Debugowanie i inspekcja kodu jest nieodłącznym elementem rozwijania oprogramowania. W przypadku JavaScript & Node.js najprostszym sposobem podglądania zawartości zmiennych jest wykorzystanie metody console.log(). Problem polega na tym że za każdym razem ten proces zajmuje nam więcej czasu niż powinien.
Aby realizować zadania szybciej, warto sięgnąć po debuggery dostępne np. w Chrome Dev Tools czy Visual Studio Code. Wystarczy ich jednorazowa konfiguracja dopasowana do projektu aby później łatwo debugować nasz kod. W tym warsztacie dowiesz się, jak możesz to zrobić!
Jako programiści możemy osiągać niezwykłe wyniki nie tylko poszerzając swoją wiedzę ale również optymalizując pracę, wykorzystując nowoczesne narzędzia i języki. Debugowanie i inspekcja kodu z pomocą console.log() wymaga od nas zaglądania do IDE, potem przeglądarki, wykonywania określonych akcji, sprawdzania zawartości konsoli - i powtarzania tego procesu tak długo, aż znajdziemy rozwiązanie, a często nie następuje to od razu. Nawet jeżeli wydaje się że ta czynność zajmuje nie więcej niż kilka sekund, tak trzeba brać pod uwagę że wykonujemy ją dziesiątki a czasem nawet setki razy, za każdym razem tracąc niepotrzebnie energię i czas.
Do debugowania i inspekcji kodu mamy do dyspozycji wiele różnych narzędzi, które pomagają nam eksplorować wartości zmiennych oraz podglądać to jak wykonuje się nasz program. Najpopularniejszym z nich są wbudowane w przeglądarki narzędzia developerskie, które często nie wymagają żadnej konfiguracji do tego aby zacząć z nich korzystać.Alternatywą lub uzupełnieniem są debuggery wbudowane w IDE (np. Visual Studio Code czy WebStorm), które dają nam niemal pełny wgląd w to jak wykonuje się nasz kod i jakie wartości przyjmują zmienne. Narzędzia te często wymagają wstępnej konfiguracji, co stanowi barierę w ich wykorzystaniu - barierę, którą zdecydowanie warto przekroczyć.
Niezwykłą funkcją debuggera kodu JavaScript jest to, że możemy skonfigurować go w taki sposób, aby jednocześnie śledzić komunikację naszej aplikacji zarówno po stronie klienta jak i serwera. Wystarczy odpowiednio skonfigurować debugger dla obu części i potem korzystać z nowych możliwości. Mowa tutaj o debugowaniu aplikacji których back-end napisany jest w Node.js (Express, Nest.js, Hapi) a front-end z wykorzystaniem JavaScriptu lub jednego z frameworków (React, Angular, Vue).
Konfiguracja jest największą przeszkodą do tego aby wykorzystywać debuggery w codziennej pracy. Całkowicie pomijany jest tutaj fakt, że takiej konfiguracji trzeba dokonać tylko raz w ramach konkretnego projektu. Dodatkowo najpopularniejsze frameworki oferują gotowe ustawienia - wystarczy że wkleimy je do naszego debuggera i dostosujemy pojedyncze opcje.
Wykorzystanie zaawansowanych narzędzi do debugowania kodu sprawi że staniesz się po prostu lepszym programistą. Korzyści w postaci oszczędzonego czasu, energii oraz mniejsza sznasa na wystąpienie różnego rodzaju błędów, są czymś co docenisz Ty oraz Twój pracodawca.
Ten warsztat został stworzony z myślą o programistach JavaScript / Node.js, którzy do inspekcji i debugowania kodu wykorzystują metodę console.log i chcą przenieść jakość swojej pracy na kolejny poziom wykorzystując Chrome Dev Tools oraz wbudowane w IDE debuggery.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Konfiguracja debuggera · 16 min
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Client",
"url": "http://localhost:1234",
"webRoot": "${workspaceFolder}/client",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"../*": "${webRoot}/*"
},
"skipFiles": [
"${workspaceFolder}/client/node_modules/**/*.js",
"${workspaceFolder}/client/dist/**/*.js",
"<node_internals>/**/*.js"
]
},
{
"name": "Server",
"type": "node",
"request": "launch",
"restart": true,
"cwd": "${workspaceRoot}/server",
"autoAttachChildProcesses": true,
"runtimeExecutable": "yarn",
"runtimeArgs": [ "run", "start:debug", "--inspect-brk" ],
"args": [
"${workspaceFolder}/server/src/main.ts"
],
"skipFiles": [
"${workspaceFolder}/server/node_modules/**/*.js",
"<node_internals>/**/*.js",
"vue@next",
"https://unpkg.com/vue@next"
]
}
],
"compounds": [
{
"name": "Server/Client",
"configurations": ["Server", "Client"]
}
]
}1 lekcja27min
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.
Nazywam się Adam Gospodarczyk, jestem designerem i full-stack developerem. Przez całą swoją karierę zawodową pracuję w świecie startupów z branży edukacji, szkoleń pracowników oraz rekrutacji. Jestem współzałożycielem trzech produktów, które rozwijałem w roli CTO od samego początku. Przez ten czas zdobyłem szerokie doświadczenie znacznie wykraczające poza zakres samej technologii. W maju 2017 roku założyłem kanał na YouTube „overment” (https://overment.com) w ramach side-project’u po godzinach. Dziś jest to jeden z największych w Polsce tego typu projektów dla programistów za który otrzymałem nagrodę „JavaScript Hero of Community” podczas konferencji JS Poland 2019. Łącząc moje startup’owe doświadczenie z pasją do technologii, pomogę Ci nauczyć się programowania patrząc szerzej na perspektywę całego biznesu - jest to doceniana przez pracodawców umiejętność, którą wiele osób całkowicie pomija. Przy tym wszystkim pokażę Ci jak ważna jest regularna nauka i pozostawanie na bieżąco.