[[oktatas:web:angular|< Angular]]

====== Angular debug ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:

<code javascript .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"
      ]
    }    
  ]
}

</code>

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 <nowiki>webpack://</nowiki> 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:
  * https://www.npmjs.com/package/ngx-logger (2023)
  * https://www.codemag.com/article/1711021/Logging-in-Angular-Applications (2023)