Znacznie szybsze debugowanie JS w VS Code

Znacznie szybsze debugowanie JS w VS Code

Comments 3 comments

debugowanie_js

Ostatnio odkryłem nową funkcjonalność środowiska Visual Studio Code. Używając wtyczki VS Code – Debugger for Chrome można umożliwić debugowanie JS. Kod aplikacji uruchomiony w przeglądarce może być śledzony w edytorze. Visual Studio Code zawiera kilka wbudowanych debuggerów w tym np. dla Node.js. Aby doinstalować powyższy dodatek wystarczy nacisnąć F1 a następnie install extension. Gdy z otwartej listy wybierzemy pozycję Debugger for Chrome, będziemy mogli już przystąpić do konfiguracji naszego rozszerzenia.

Konfiguracja

Podstawową kwestią jest zmiana konfiguracji Chrome, aby upewnić się, że udostępnia on usługę zdalnego debugowania kodu na określonym porcie. Aby to zrobić wystarczy uruchomić przeglądarkę z parametrem

chrome.exe --remote-debugging-port=9222

W ten sposób Chrome udostępnia usługę do zdalnej inspekcji kodu stron otwieranych w przeglądarce. Można to przetestować wpisując adres:

http://localhost:9222

Następnie wystarczy skonfigurować taski debugujące w Visual Studio Code.

Jeżeli jeszcze nie posiadamy pliku launch.json wystarczy nacisnąć przycisk F5 odpowiadający za rozpoczęcie debugowania, aby plik został wygenerowany. Wewnątrz niego w sekcji configurations możemy dodać wiele rodzajów debuggerów począwszy od .NET do Node.js. Jednak my skupimy się jedynie na połączeniu z Chrome.

Interesują nas trzy konfiguracje dla debugowania:

  1. Debugowanie JS w lokalnym pliku 
    {
    "name": "Launch index.html",
    "type": "chrome",
    "request": "launch",
    "file": "${workspaceRoot}/src/index.html"
}
  2. Debug hostowanego projektu 
    {
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost/mypage.html",
    "sourceMaps": true,
    "webRoot": "wwwroot"
}
  3. Podłączenie się do już uruchomionej strony 
    {
    "name": "Attach",
    "type": "chrome",
    "request": "attach",
    "port": 9222,
        "sourceMaps": true
}

Co to zmienia?

Jak dotąd istniał stały podział: backend debugowało się w konkretnych IDE, a frontend w narzędziach developerskich przeglądarki. Połączenie przeglądarki i edytora na czas debugowania aplikacji zbliża nas do połączenia tych dwóch ekosystemów i zwalnia z przełączania się pomiędzy środowiskami gdzie edytujemy kod i gdzie go testujemy. Według mnie to zwiększa komfort pracy i pozwala lepiej skoncentrować się na rozwiązywanym problemie, zamiast na próbach synchronizowania przeglądarki z kodem nad którym pracujemy.

Przykłady

Mechanizm ten jest skonfigurowany dla mojego projektu na GitHub – InvestDashboard. Można pobrać najnowszą wersję tego projektu i po odpaleniu go w Visual Studio Code nacisnąć przycisk F5 i debugowanie będzie już działało poprawnie. Trzeba jednak pamiętać o odpowiedniej konfiguracji Chrome

Chrome_debug2