Jak debugować aplikacje Node.js w Visual Studio Code

Debugowanie aplikacji Node.js w samym Visual Studio Code jest możliwe i proste. Edytor VS Code jest wyposażony we wbudowany debuger, który może debugować dowolną aplikację skierowaną do środowiska uruchomieniowego Node.js. Oznacza to, że możesz debugować JavaScript lub dowolny inny język, który się do niego kompiluje (np. TypeScript).

Ten artykuł przeprowadzi Cię przez procedurę debugowania aplikacji Node.js w programie VS Code. Dowiesz się, jak rozpocząć sesję debugowania, wstawić punkty przerwania, dołączyć proces zewnętrzny i debugować kod TypeScript przy użyciu map źródłowych.

Czego potrzebujesz, aby zacząć

Przed rozpoczęciem zainstaluj Node.js i VS Code na komputerze lokalnym. Najnowsza wersja Node.js jest dostępna na Node.js oficjalna strona internetowa. Podobnie w przypadku programu Visual Studio Code pobierz najnowszą wersję z witryny

Kod VS strona internetowa. Aby uzyskać instrukcje dot jak skonfigurować kod VS w systemie Windows, przeczytaj nasz przewodnik konfiguracji.

Potrzebujesz również projektu Node.js. Możesz stworzyć od podstaw prostą aplikację Node.js lub użyj istniejącej aplikacji.

Proces debugowania w VS Code

Rozpoczęcie sesji debugowania w edytorze VS Code jest dość proste. Otwórz plik z VS Code i kliknij Uruchom i debuguj ikonę na pasku bocznym (lub naciśnij Ctrl + Shift + D na klawiaturze). Następnie kliknij Uruchom i debuguj przycisk, aby rozpocząć proces.

Domyślnie Node.js spróbuje znaleźć środowisko debugowania twojego projektu. Ale jeśli automatyczne wykrywanie nie powiedzie się, pojawi się monit o wybranie odpowiedniego środowiska. W tym samouczku tym środowiskiem jest Node.js.

Po wybraniu środowiska VS Code aktywuje debuger i dołącza go do procesu. Możesz zobaczyć swoje wyniki w KONSOLA DEBUGOWANIA. Korzystając z paska narzędzi debugowania u góry, możesz przeglądać kod, wstrzymywać wykonywanie lub kończyć sesję.

Masz również możliwość utworzenia pliku konfiguracyjnego. The uruchom.json pozwala konfigurować i konfigurować szczegóły debugowania. Jeśli twój skrypt wymaga argumentu, podaj te argumenty w pliku uruchom.json plik. W każdej konfiguracji można ustawić wiele opcji:

{ 
"wersja": "0.2.0", 
„konfiguracje”: [ 
 { "typ": "węzeł", 
"wniosek": "początek", 
"nazwa": „Uruchom program”, 
„pomiń pliki”: [ "/**" ], 
"program": "${workspaceFolder}\\index.js"
 } 
 ]
}

Zauważysz również pięć paneli po lewej stronie edytora. Te panele są ZMIENNE, OGLĄDAĆ, STOS WYWOŁAŃ, ZAŁADOWANE SKRYPTY, I PUNKTY PRZERWANIA:

Po zakończeniu konfiguracji wybierz i uruchom program za pomocą menu konfiguracji.

Dołącz proces zewnętrzny

Inną metodą konfigurowania sesji debugowania Node.js jest dołączenie procesu zewnętrznego. Uruchom program za pomocą następującego polecenia:

węzeł --inspect index.js

Włóż -brk flaga po --sprawdzać jeśli chcesz dołączyć go przed uruchomieniem programu.

Następnie otwórz selektor procesów w VS Code. Zawiera listę wszystkich procesów dostępnych w środowisku Node.js. Aby otworzyć selektor, naciśnij Ctrl + Shift + P i znaleźć Debugowanie: Dołącz do polecenia Node.js.

Kliknij polecenie i wybierz odpowiednią opcję, aby rozpocząć proces debugowania.

Tworzenie punktu przerwania

Jeśli chcesz zatrzymać się w określonych punktach programu, aby sprawdzić kod, ustaw tam punkty przerwania. Punkty przerwania można ustawić niemal w dowolnym miejscu w kodzie. Obejmuje to deklaracje zmiennych, wyrażenia i komentarze. Ale nie możesz ustawić punktów przerwania w deklaracjach funkcji.

Tworzenie punktu przerwania jest dość proste. Gdy przesuniesz kursor myszy na lewą stronę numerów linii, na każdej linii pojawi się czerwone kółko. Zidentyfikuj numer wiersza w kodzie, w którym chcesz wstawić punkt przerwania. Następnie kliknij tę linię, aby dodać punkt przerwania:

w PUNKTY PRZERWANIA okienku, znajdziesz wszystkie punkty przerwania włączone w twoim projekcie. Tutaj będziesz zarządzać, edytować i wyłączać punkty przerwania. Możesz także zatrzymać kod, gdy zostanie zgłoszony wyjątek lub w przypadku nieprzechwyconych wyjątków. Pozwala to sprawdzić problem przed zakończeniem procesu.

Zobaczmy punkty przerwania w akcji. Kliknij Początek ikonę, aby rozpocząć sesję debugowania. Program zatrzyma się w pierwszym punkcie przerwania i zwróci wartość do sprawdzenia:

Możesz kliknąć przycisk Kontynuować ikonę (lub naciśnij klawisz F5), aby przenieść program do następnego punktu przerwania. Będzie to kontynuowane, aż dojdziesz do końca programu.

Debugowanie TypeScript z mapami źródłowymi

Ponieważ TypeScript staje się coraz bardziej popularny, liczba projektów Node.js napisanych w TypeScript z pewnością wzrośnie. Na szczęście możesz także debugować projekty oparte na TypeScript za pomocą VS Code.

Najpierw utwórz a tsconfig.json plik w katalogu głównym projektu (jeśli nie został jeszcze utworzony) i włącz mapy źródłowe:

{ „Opcje kompilatora”: { „Mapy źródłowe”: PRAWDA }}

Następnie dołącz uruchomiony proces i ustaw punkty przerwania w pliku TypeScript. Visual Studio Code znajdzie mapy źródłowe i użyje ich.

Możesz jawnie powiedzieć VS Code, gdzie znaleźć mapy źródłowe. Aby to zrobić, dodaj pliki wyjściowe atrybut w pliku konfiguracji uruchamiania i skieruj go na dokładną lokalizację map źródłowych:

{ 
"wersja": "0.2.0", 
„konfiguracje”: [ { 
"typ": "węzeł", 
"wniosek": "początek", 
"nazwa": „Uruchom program”, 
„pomiń pliki”: [ "/**" ], 
"program": "${workspaceFolder}\\index.js", 
„pliki wyjściowe”: "${workspaceFolder}\\index.js", 
 } 
 ]
}

Jeśli używasz węzeł ts aby uruchomić projekt bez kroku kompilacji, użyj tego zamiast powyższej konfiguracji:

{ 
"wersja": "0.2.0", 
„konfiguracje”: [ { 
"typ": "węzeł pwa", 
"wniosek": "początek", 
"nazwa": „Uruchom serwer”, 
„pomiń pliki”: [ "/**" ], 
„runtimeArgs”: [ "-R", „węzeł-ts/rejestr” ], 
„argumenty”: [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Ponieważ nie ma atrybutu programu, runtime argumenty rejestry węzeł ts jako moduł obsługi plików TypeScript. Pierwszy argument za argumenty jest plikiem wejściowym programu. Teraz możesz rozpocząć sesję debugowania. Jeśli rozwijasz się za pomocą zwykłego JavaScript lub frameworka front-end, możesz również debugować kod JavaScript w przeglądarce.

Inne funkcje w Visual Studio Code

Visual Studio Code to potężny edytor kodu źródłowego pełen niesamowitych funkcji. Omówiliśmy wbudowane narzędzie do debugowania programu VS Code. Pokazaliśmy również, jak można go używać do debugowania aplikacji Node.js.

Ale w VS Code jest wiele innych przydatnych funkcji. Chociaż niektóre z nich możesz znać, niektóre mogą być dla Ciebie zupełnie nowe. W takim przypadku może Cię zainteresować zapoznanie się z tymi funkcjami i sposobami ich używania.