Angular debug

Szerző: Sallai András
Copyright © Sallai András, 2023
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Chromium a hibakövetéshez

Telepítsük a Chromiumot:

choco install chromium

apt install chromium

Ha még nem létezik a launch.json fájl, hozzuk létre. Ha létezik csak egészítsük ki a következővel, a configurations részt:

.vscode/launch.json

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chromium localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "runtimeExecutable": "/usr/bin/chromium",
      "runtimeArgs": [
        "--new-window",
        "--disable-background-networking"
      ]
    }    
  ]
}

A Debug fülön válasszuk ki a „Launch Chromium localhost” lehetőséget, majd nyomjuk meg a futtatás gombot.

A megnyílt új ablakban nyissuk fejlesztő eszközt, például F12. Töréspontokat ebben a böngészőablakban tehetünk. Ehhez válasszuk a „Sources” fület. A fastruktúrában a webpack:// csomópontból kiindulva keressük meg a futó .js fájlt.

Tegyünk egy töréspontot a vizsgálni kívánt sorba, majd frissítsük a weboldalt. Visszakapjuk a VSCode ablakát, ahol elvégezhetjük a vizsgálatot.

Linkek

Eredeti megoldás

https://jsantacl.medium.com/how-to-debug-an-angular-app-using-vs-code-and-chromium-7eb60b0b0cee (2023)

Egyéb: