Chromeのデバッガがtypescriptファイルで動作しません

Question

私はwebstorm 2016.2、angular-cli、webpack2を使用しています。 写真では、19,20,22,23行目に折れ点を作成できません。 私が21行目に作成すると、コンソールは19行目で彼に言ったことを出力しません。

私はデバッグする必要があるtsファイルを見ていますが、私は他のファイルやjsファイルをデバッグしているようですへのアクセス権がありません。

可能であればtsファイルをデバッグしたい場合はjsファイルを、そうでない場合はjsファイルをデバッグします。

角度-cli.json：

{ 
    "project": { 
    "version": "1.0.0-beta.11-webpack.2", 
    "name": "store-app-02" 
    }, 
    "apps": [ 
    { 
     "main": "src/main.ts", 
     "tsconfig": "src/tsconfig.json", 
     "mobile": false 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "config/protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "config/karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "prefix": "app", 
    "sourceDir": "src", 
    "styleExt": "css", 
    "prefixInterfaces": false, 
    "lazyRoutePrefix": "+", 
    "styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ] 
    } 
} 

tsconfig.json：あなたのtsコードは、最終的にそれをコンパイル時にjsに変換され

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

Answer 1

javascriptファイルwhですichはWebブラウザに読み込まれます。あなたのブラウザはtypescriptについて知りません。

ts --->js（es5）。

デバッガを実行すると、コンパイルされたjsファイルがそれぞれ実行されます。何らかのエラーがある場合はjsファイルを指しており、内部で.d.tsの助けを借りてtsファイル行番号（エラーが発生した場合）にマップされています。

デバッグする場合は、karmaテストランナーを使用するか、デバッグオプションを排他的に提供するvisual studio codeを使用します。

Answer 2

TypeScriptファイルでツールを使用できるようにするには、通常、TypeScriptをコンパイルすると同時にマップファイルを生成する必要があります。

マップファイルには、元の.tsファイルとコンパイル済み.jsファイルをリンクする方法に関する情報が含まれています。デバッガのようなツールは、多くの場合、.tsファイルを処理できるようにこれらのファイルを必要とします。

誰かが説明したhereです。

the TypeScript compilerこれらのマッピングに追加のファイルを生成したくない場合は、--inlineSourceMapを使用して、これらの情報をコンパイル済みファイルの最後に直接追加できます。

ここで、Chromeは地図ファイルを見つけられないと思います。

Answer 3

Chromeは完全にデバッグし、ブレークポイントを突き上げてログメッセージを印刷します。私は、問題はあなたのtsconfig.jsonにあると思う。他の答えが述べたように、は、コンパイル時にjsファイルを生成する必要があります。。コンパイラにこれを知らせるには、次のものを追加する必要があります。

"compileOnSave": true 

これは、保存した直後にタイプコピーをコンパイルし始めます。

まだ動作しない場合は、ブラウザのキャッシュをクリアしてブラウザを再起動してください。これは確かに魔法を行うでしょう。

私はそれが役に立ちそうです。 （私のChromeバージョン：52.0.2743.116 m（64ビット） - >しかし、それは問題ではありません）