VSコードソースコードが正しくマップされていません

Question

私は、対角線2のプロジェクトをvsコードから実行しようとしています。ここにtsconfig、lanuch.jsonファイルがあります。

tsconfig.json

{ 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es6", "dom"], 
    "mapRoot": "./", 
    "module": "es6", 
    "moduleResolution": "node", 
    "outDir": "../dist/out-tsc", 
    "sourceMap": true, 
    "target": "es5", 
    "typeRoots": [ 
     "../node_modules/@types" 
    ] 
    } 
} 

launch.json

{ 
    "version": "0.2.0", 
    "configurations": [ 

     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome against localhost", 
      "url": "http://localhost:4200", 
      "webRoot": "${workspaceRoot}/src", 
      "sourceMaps": true 
      // "runtimeExecutable": "/usr/bin/chromium-browser", 
      // "sourceMapPathOverrides": { 
      //  "webpack:///*": "/*" 
      // } 
     }, 
     { 
      "type": "chrome", 
      "request": "attach", 
      "name": "Attach to Chrome", 
      "port": 9222, 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}/src" 
      // "sourceMapPathOverrides": { 
      //  "webpack:///*": "/*" 
      // } 
     } 
    ] 
} 

私は私のvscodeエディタにブレークポイントを設定することができません。そうすると、マッピング問題のために自動的に無効になります。

Answer 1

は、私は別の質問にa full explanationを追加しましたが、ここで簡単にまとめます：

があなたのlaunch.jsonにこれを追加します。これは、コンソールに余分な多くの情報をダンプします

"diagnosticLogging": true 

。あなたのTypeScriptファイルの名前を探してみると、Chromeがソースファイルを見つけることができるパスが表示されます。 sourceMapPathOverridesを調整して、実際のパスと一致するようにしてください。