Fehlersuche Typoskript in VSCode

Question

Ich sehe viele Informationen für ältere Versionen von VSCode (v1.16.1 - neuesten ab diesem Beitrag) oder Attribute in der Datei launch.json, die veraltet sind.

Ich habe eine Vielzahl von Config-Attributen ausprobiert, einige ältere Informationen da draußen auf GitHub-Foren (einige sind nicht durchführbar, da die Attribute weg sind oder veraltet sind). Der Versuch, Breakpoints direkt im Typescript-Code in VSCode zu debuggen und zu treffen.

Derzeit ist hier mein tsconfig.json Datei:

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "outDir": "./dist/", 
    "baseUrl": "src", 
    "module": "commonjs", 
    "sourceMap": true, 
    "declaration": false, 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "es5", 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "include": [ 
     "src/**/*.ts" 
    ], 
    "exclude": [ 
     "node_modules" 
    ], 
    "lib": [ 
     "es2017", 
     "dom" 
    ] 
    } 
} 

Meine launch.json Datei für Visual Studio-Code ist:

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Launch Chrome", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost:3000/", 
      "sourceMaps": true, 
      "trace": true, 
      "webRoot": "${workspaceRoot}/src", 
      "userDataDir": "${workspaceRoot}/.vscode/chrome", 
      "sourceMapPathOverrides": { 
       "webpack:///src/*": "${webRoot}/*" 
      } 
     } 
    ] 
} 

Chrome öffnet, aber der Standard Die Seite "... abgewiesene Verbindung" wird angezeigt:

Gerade jetzt, versuche nur eine dieser typischen "Admin-Vorlagen" zu debuggen. Ich kann es perfekt durch das Terminal laufen lassen: ng serve

Allerdings Debuggen dieser Angular-App entgeht mir. Bemerkenswert, dass ich Angular, Typescript und VSCode im Allgemeinen völlig neu bin.

Answer 1

Haben Sie das outFiles Attribut Ihrer Konfiguration, um etwas zu geben versucht, wie:

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Launch Chrome", 
      "sourceMaps": true, 
      "outFiles": [ 
       "${workspaceRoot}/out/**/*.js" 
      ] 
     } 
    ] 
} 

Nach this docs die Einstellung "sourceMaps": true sagt vscode die erzeugte *.js mit den *.ts Dateien abzubilden. Und außerdem müssen Sie das Attribut outFiles setzen, um vscode zu sagen, wo es nach diesen *.js Dateien suchen sollte, wenn sie nicht im selben Verzeichnis sind.

Aus der Dokumentation:

Wenn die generierten (transpiled) JavaScript-Dateien Leben nicht neben ihre Quelle, sondern in einem separaten Verzeichnis, müssen Sie den VS-Code Debugger helfen ihnen, indem das outFiles Attribut Ortung .