typescript - „Nevyzkoušený breakpoint“ ve Visual Studio Code s rozšířením Chrome Debugger

Snažím se ladit svůj kód v TypeScriptu ve Visual Studio Code pomocí rozšíření Chrome Debugger, ale u svého breakpointu dostávám zprávu „Neověřený breakpoint“ a provádění se na mém breakpointu nezastaví.

Zde je můj soubor launch.json:

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Verze aplikace:

Visual Studio Code: 1.25.1
Chrome: 67.0.3396.99

Máte nějaké další návrhy, jak mohu tento problém vyřešit?

Odpověď č. 1

Konečně jsem přišel na to, co je špatně:

Když čtu definici ''$ {workspaceFolder}'', uvádí následující:

cesta ke složce otevřené ve VS Code

Má chyba:

Moje cesta ve Windows k mému projektu byla následující: C:\Users\myusername\Documents\VSCode\Source\ProjectName

Prostřednictvím Visual Studio Code jsem měl otevřenou složku Source a vždy bylo potřeba provést příkaz změny adresáře (cd ProjectName) v Integrovaném terminálu do 'ProjectName'. To vedlo k tomu, že složka .vscode a soubor launch.json byly vytvořeny ve složce Source, a ne ve složce ProjectName.

Výše uvedená chyba vedla k tomu, že $ {workspaceFolder} ukazoval na složku Source, kde žádné komponenty Angular nebyly, místo aby ukazoval na složku ProjectName.

Oprava:

Ve Visual Studio Code otevřete složku: C:\Users\myusername\Documents\VSCode\Source\ProjectName a nastavte můj launch.json v tomto adresáři.

Odpověď č. 2

Další aktualizace pro @angular/cli 9.1.7 28/05/2020...

Toto je nyní moje pracovní konfigurace pro @angular/cli 9.1.7. Odstranění sourceMapPathOverrides

    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

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

Mé řešení problému „Neověřená zarážka“.

Životní prostředí

Angular CLI 8.1.1
Visual Studio Code 1.36.1
Debugger pro rozšíření Chrome 4.11.6

Výchozí soubor .vscode/launch.json vytvořený ve VSC přes možnost „Přidat konfiguraci“ bude vypadat podobně jako toto (změnil jsem port z 8080 na 4200).

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

Přidání níže uvedené položky vyřeší můj problém s „Neověřenou zarážkou“.

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

Kompletní a funkční .vscode/launch.json:

{
  // 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",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

Existují některé další položky, které lze přidat:

 "breakOnLoad": true,
 "sourceMaps": true,

Nicméně v mém případě jsem je k vyřešení problému nepotřeboval.

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

Odpověď č. 3

Výše uvedená odpověď pravděpodobně vyřeší spoustu problémů, ale můj nevyřešila. Můj problém byl mnohem jednodušší a otravnější...

Konfigurační nastavení v souboru launch.json je rozlišuje velká a malá písmena.

Můj záznam „webRoot“ byl napsán správně, ale v jednom z slov jsem měl velké B místo malého b.

Například:

"webRoot": "${workspaceFolder}/My.Folder"

neodpovídá složce ve vašem pracovním prostoru s názvem:

Můj.folder

Doufám, že to někomu tam venku pomůže.

Odpověď č. 4

Bylo poskytnuto mnoho správných odpovědí. V mém případě mi pomohla kombinace všech těchto odpovědí a trvalo mi dlouho, než jsem na to přišel. Doufám, že vám tímto mohu ušetřit nějaký čas a stres.

dovolte mi shrnout to krok za krokem s odkazem na výše uvedené odpovědi, co mi pomohlo:

Je důležité spustit VS Code ze správné složky (viz odpovědi od CodeChimp a monstertjie_za).
Otevřete okno konzole a přejděte pomocí cd do složky projektu.
Příklad:
cd myProject
code .
Ujistěte se, že konfigurujete soubory ve správné složce .vscode.
Správná složka .vscode je podsložkou vaší projektové složky.
Poznámka: pokud jste již omylem otevřeli VS Code v podsložce příliš hluboko, např. ve složce src, najdete tam složku .vscode (jako v mém případě), která obsahuje konfigurační soubory, jež jsou pro debugování k ničemu.
Nastavte ladicí konfiguraci v souboru .vscode\launch.json.
Ujistěte se, že jste zadali správný port pro vaši aplikaci, v mém případě port 4200 fungoval dobře.
Také se ujistěte, že je parametr "webRoot" správně nakonfigurován (viz odpověď od Stiga Pereze). V mém případě bylo nutné k němu přidat podsložku. Abyste zjistili, jaká je cesta určená proměnnou $(workspaceFolder), podívejte se na otázku, kterou jsem položil na StackOverflow ohledně toho, jak zobrazit hodnoty proměnných ve VS Code.
Poznámka: Pokud taková konfigurace ještě neexistuje, proveďte následující pro její přidání: Přejděte na rozšíření pro ladění (např. kliknutím na postranní panel). V rozbalovací nabídce vašeho ladicího programu vyberte „Přidat konfiguraci...“, poté stiskněte modré tlačítko „Přidat konfiguraci“. Jako konfiguraci k přidání vyberte „Spustit Chrome“.
Příklad konfigurace (launch.json):
```
"configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]
```
Nahraďte projectsubfolder podadresářem, který můžete mít ve svém projektu. Všimněte si, že je to rozlišující velká a malá písmena (viz odpověď od Michaela Walshe).
Nyní nastavte přerušovací body ve vaší aplikaci.
Chcete-li spustit svou aplikaci s ladicím programem, otevřete okno terminálu ve VS Code, napište
cd projectsubfolder
npm install & ng serve
Tím zajistíte, že závislé balíčky budou vyřešeny a staženy před kompilací vaší aplikace. Počkejte, až bude kompilace dokončena.
Poté klikněte na zelený trojúhelník v ladicím programu VS, což spustí okno Chrome s připojeným ladicím programem.
Poznámka: Není nutné spouštět npm install pokaždé, jen když se změnily balíčky/závislosti. Většinou stačí spustit ng serve pro opakovanou kompilaci a spuštění kódu.

Odpověď č. 5

V mém případě jsem musel hodnotu sourceMapPathOverrides definovat takto:

Soubor launch.json (obsažený ve složce .vscode):

{
  // 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:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

Můj zdroj je v $ {workspaceFolder}/project/app.