Debugowanie i uruchamianie skryptu Angular2 w programie Visual Studio Code?

Debugowanie i uruchamianie skryptu Angular2 w programie Visual Studio Code?

Próbuję debugować aplikację typu Angular2 za pomocą kodu VS https://angular.io/guide/quickstart

Czy ktoś może udostępnić instrukcje debugowania i uruchamiania z kodu VS?

Po wielu badaniach znalazłem następujące kroki:

Zanim zaczniesz, upewnij się, że masz najnowszą wersję kodu VS. Możesz zweryfikować najnowszą wersję - Pomoc> Sprawdź aktualizacje lub Informacje.

1. Zainstaluj rozszerzenie o nazwie „Debugger for Chrome”. Po zakończeniu instalacji uruchom ponownie kod VS.

2. Przejdź do okna debugowania, otwórz plik launch.json w przeglądarce Chrome.

3. W sekcji konfiguracji Launch.json użyj poniższej konfiguracji

   {
       "name": "Launch localhost with sourcemaps",
       "type": "chrome",
       "request": "launch",
       "url": "http://localhost:3000/Welcome",
       "sourceMaps": true,
       "webRoot": "${workspaceRoot}"
   }
   

4. W tsconfig.json upewnij się, że masz „sourceMap”: true

To kończy ustawienia środowiska debugowania. Teraz, zanim zaczniesz debugować, upewnij się, że wszystkie istniejące instancje Chrome.exe są zamknięte. Zweryfikuj za pomocą Menedżera zadań LUB użyj polecenia DOS „killall chrome”

5. Uruchom swój projekt, używając polecenia npm start i Chrome jako domyślnej przeglądarki.

6. Po pomyślnym uruchomieniu aplikacji otrzymasz numer portu. Skopiuj adres URL z przeglądarki Chrome i wklej w powyższej sekcji adresu URL. (UWAGA: jeśli używasz routingu w swojej aplikacji, adres URL powinien wyglądać jak powyżej, w przeciwnym razie będzie kończyć indeks.html itp.)

7. Teraz umieść punkty przerwania w dowolnym miejscu w plikach maszynopisu.

8. Ponownie przejdź do okna debugowania w kodzie VS i naciśnij Uruchom. Twoja karta / instancja podłączona do debuggera będzie wyglądać jak poniżej.

Określ userDataDir - pozwoli to uniknąć kolizji z innymi instancjami Chrome, które być może już masz uruchomione. Zauważyłem z tego powodu, że Chrome po prostu przestaje nasłuchiwać na dowolnym określonym porcie. Poniżej znajduje się czego używam i jest super!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

Podziękowania dla @reecebradley - GitHub: Nie można połączyć się z celem: połączyć ECONNREFUSED

Miałem podobny problem, ale mój projekt zawierał również pakiet internetowy, który spowodował niepowodzenie powyższych rozwiązań. Po przejrzeniu internetu znalazłem rozwiązanie w wątku na githubie:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

W każdym razie tak właśnie się stało.

Uwaga: - Przed rozpoczęciem musisz sprawdzić, czy masz najnowszą wersję kodu Visual Studio, a także masz zainstalowane rozszerzenie o nazwie „ Debugger for Chrome ” w programie VS Code.

Po pierwsze, w „./config/webpack.dev.js”

• use => devtool: 'source-map'
• zamiast => devtool: 'Cheap-module-source-map'

Następnie zainstaluj i użyj wtyczki write-file-webpack-plugin:

• npm install --save write-file-webpack-plugin

Dodaj wtyczkę do „./config/webpack.dev.js”, dodając:

• const WriteFilePlugin = require ('write-file-webpack-plugin');

pod wtyczkami Webpack u góry. Kontynuuj dodawanie:

• nowy WriteFilePlugin ()

do listy wtyczek po nowej nowej DefinePlugin (), tj

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

Gwarantuje to, że mapy źródłowe zostaną zapisane na dysku

Na koniec mój plik launch.json jest podany poniżej.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

zwróć uwagę na brak „/ dist /” w katalogu głównym. w tej konfiguracji mapy źródeł znajdują się w ./dist/, ale wskazują na ./src/. vscode dołącza bezwzględny katalog główny do obszaru roboczego i poprawnie rozwiązuje plik.

Oto oficjalna dokumentacja kodu Visual Studio dotycząca debugowania Angular w VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Aby debugować kod Angular po stronie klienta, musimy zainstalować rozszerzenie Debugger for Chrome. Otwórz widok Rozszerzenia (Ctrl + Shift + X) i wpisz „chrome” w polu wyszukiwania. Zobaczysz kilka rozszerzeń, które odwołują się do Chrome. Naciśnij przycisk Instaluj, aby wyświetlić Debugger dla Chrome. Przycisk zmieni się na Instalowanie, a po zakończeniu instalacji zmieni się na Wczytaj ponownie. Naciśnij Odśwież, aby ponownie uruchomić VS Code i aktywować rozszerzenie.

Musimy wstępnie skonfigurować debugger. Aby to zrobić, przejdź do widoku debugowania (Ctrl + Shift + D) i kliknij przycisk koła zębatego, aby utworzyć plik konfiguracyjny debugera launch.json. Wybierz Chrome z listy rozwijanej Wybierz środowisko. Spowoduje to utworzenie pliku launch.json w nowym folderze .vscode w Twoim projekcie, który obejmuje konfigurację zarówno uruchamiania witryny sieci Web, jak i dołączania do uruchomionej instancji. W naszym przykładzie musimy wprowadzić jedną zmianę: zmienić port z 8080 na 4200.

Miałem z tym problemy i chociaż odpowiedź @Sankets pomogła, to właśnie ten problem rozwiązał go dla mnie https://github.com/angular/angular-cli/issues/2453 .

W szczególności dodanie poniższego pliku do pliku launch.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}

Dla nasion kanciastych:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}

Te mody launch.jsondziałały dla mnie na MacOS, co pozwoliło mi uzyskać debuger i punkty przerwania działające w nowej instancji Chrome na sesję debugowania ...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }

Ten jest wypróbowany i przetestowany -

Krok 1: Zainstaluj debuger Chrome: po prostu otwórz paletę poleceń (Ctrl + Shift + P) w kodzie VS i wpisz polecenie Rozszerzenia: Zainstaluj rozszerzenie. Gdy pojawi się lista rozszerzeń, wpisz „chrome”, aby przefiltrować listę i zainstalować rozszerzenie Debugger for Chrome. Następnie utworzysz plik konfiguracji uruchamiania.

[Więcej szczegółów kroku 1]

Krok 2: Utwórz i zaktualizuj plik launch.json: Dwie przykładowe konfiguracje launch.json z „request”: „launch”. Aby uruchomić Chrome na podstawie pliku lokalnego lub adresu URL, musisz określić plik lub adres URL. Jeśli używasz adresu URL, ustaw webRoot na katalog, z którego są obsługiwane pliki. Może to być ścieżka bezwzględna lub ścieżka używająca $ {workspaceRoot} (folder otwarty w kodzie). webRoot służy do rozwiązywania adresów URL (takich jak „ http: //localhost/app.js ”) do pliku na dysku (np. „/Users/me/project/app.js”), więc uważaj, aby został ustawiony poprawnie. zaktualizuj zawartość pliku launch.json w następujący sposób-

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[Więcej szczegółów w kroku 2]

Muszę użyć CORS więc otwieram Chrome z wyłączonymi zabezpieczeniami internetowymi. Następnie debuguję aplikację Angular, dołączając debugger do chrome.

Linia CMD do uruchamiania Chrome z wyłączonymi zabezpieczeniami internetowymi:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

launch.json plik do dołączenia debuggera:

{
    // 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}"
        },
    ]
}

Odpowiedź Sanketa była poprawna, ale miałem z tym pewne problemy.

Po pierwsze, Launch.json znajduje się w katalogu „.vscode” projektu, a po drugie, numer portu powinien być taki sam, jak domyślny port serwera, którego używasz do uruchamiania aplikacji. Używam ng serv z cmd do uruchamiania mojego projektu, a domyślny numer portu to 4200 , więc zmieniłem plik launch.json w następujący sposób.

{
    // 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:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}