Visual Studio Code - wpis bez swojej kategorii ponieważ dopiero zaczynam nowy cykl artykułów.

Ostatnie zmiany w projektach prowadzonych przez firmę zaowocowały przeniesiem części zespołu (w tym mnie) do projektu w pełni skupionego na interfejsie aplikacji, tj. front-end. Zaczęło się poszukiwanie odpowiedniego środowiska programistycznego ponieważ Visual Studio nie do końca spełniał moje oczekiwania.

Przez pierwsze dwa, może trzy tygodnie używałem edytora Sublime Text 3. Był wyśmienity do nauki, przejrzysty i bardzo czytelny. Jednakże po licznych spotkaniach, zapoznaniu się ze strukturą projektu oraz technologią przyszedł czas na właściwą pracę. I tutaj zaczęły się problemy, wróciły przyzwyczajenia z Visual Studio...

Instalowanie wtyczek, skróty klawiszowe z Visual Studio czy niezwykle przydatny Live Share - zwłaszcza, gdy duża część zespołu znajduje się w innych lokalizacjach.

Wybór padł na Visual Studio Code a tematem tego artykułu będzie debuggowanie kodu w samym środowisku a nie przy użyciu narzędzi deweloperskich dostępnych z poziomu przeglądarki.

W pierwszym kroku klikamy przycisk Extenstions znajdujący się po lewej stronie naszego panelu a następnie wyszkujemy wtyczkę pod nazwą Debugger for Chrome:

Do poprawnego działa niezbędne jest utworznie pliku konfiguracyjnego. Wersje domyślą pliku możemy utworzyć przechodząc przez poniższe kroki: Debug -> Add Configuration i z listy rozwijalnej wybieramy Chrome: Po przeprowadzeniu tej operacji zostanie utworzony domyślny plik konfiguracji launch.json w poniższej postaci:

{
    // 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": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Plik ten musimy dopasować do naszych potrzeb oraz odpowiednio skonfigurować samą przeglądarkę.

Na potrzeby mojego obecnego projektu nieco zmodyfikowałem ten plik. Przyjmuje on teraz postać:

{
    // 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": "attach",
			"name": "Attach to Chrome",
			"port": 9222,
			"webRoot": "${workspaceFolder}/src"      
		}
    ]
}

Przeglądarka musi zostać uruchomiona z odpowiednimi parametrami startowymi. Będzie to osobna instancja okna przeglądarki służąca do debugowania aplikacji webowej z poziomu Visual Studio Code. Najprostszy sposób to uruchomienie właściwości pliku Chrome.exe i modyfikacja właściwości Target. Do ścieżki uruchomieniowej dodajemy parametry w poniższej postaci: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=remote-profile

Jeżeli chcecie dowiedzieć się więcej o profilu zdalnym zapraszam pod poniższy adres: Chromium Blog: Remote debugging with Chrome Developer Tools. W moim przypadku parametr ten pozwolił na rozwiązanie poniższego problemu:

Konfiguracja została przygotowana poprawnie, port debuggowania jest zdefiniowany. Pora na sprawdzenie jak wtyczka sprawuje się w Visual Studio Code.

W pierwszym kroku uruchamiamy naszą aplikację webową z poziomu terminala. Ja pracuje teraz z technologią Oracle JET a proces uruchomienia odbywa się za pomocą polecenia:

ojet serve (lista odpowiednich parametrów).

Korzystając z przycisku Debug a następnie klikając Start Debugging spinamy się z narzędziami deweloperskimi przeglądarki:

Częstym problem przy próbie ustawienia breakpointa jest błąd w postaci: Unverified breakpoint: Problem ten jest spowodowany błędnym ustawieniem ścieżki do naszego projektu. Pierwszy raz na moim blogu możecie spotkać się z rozmytym kodem - wynika to tylko i wyłącznie z faktu, że zrzut ekranu został wykonany na fragmencie kodu, który (jeszcze) nie jest dostępny publicznie.

W przeglądarce Chrome przechodzimy do wybranej przez nas podstrony a efekt możecie zobaczyć na poniższym zrzucie ekranu:

Debugowanie kodu języka C# z poziomu Visual Studio jest niezywkle proste i intuicyjne. Niestety w przypadku projektów webowych zwykle korzystamy z narzędzi deweloperskich swojej ulubionej przeglądarki.

Brak tej możliwości w Visual Studio Code skłonił mnie do napisania tego artykułu wraz z omówieniem często spotykanych błędów. Mam nadzieję, że korzystając z tego wpisu będziecie w stanie poprawnie skonfigurować swoje środowisko.