IntelliJ IDEA TypeScript/Webpackデバッグは、JavaScriptブレークポイントでのみ機能します

Question

私はAngular 2/Bootstrap 4/Webpack projectを使用しています。新しいものがどのように並んでいるかを知るために、私はChromeのIntelliJ IDEA 15で動作するようデバッグしようとしています。 JetBrains Chrome拡張機能を使用します。

問題は、TypeScriptファイルで設定したブレークポイントがすべて無視されることです。私はbuilt-in transpilerを使用していて、My-app.tsがmy-app.jsと関連するmy-appと同じフォルダにあるように、Type-fileファイルと同じ名前/場所のJavaScript出力ファイルを残しています.js.mapマッピングファイル。

奇妙なことは、生成されたJavaScriptファイルにブレークポイントを設定すると、IDEがTypeScriptファイル内の対応する箇所でブレークすることです（ブレークポイントは表示されません）。マッピングが正常に機能しているように見えるので、私は通常通りステップできます。

問題は、.tsファイルにブレークポイントを設定しても、対応する.jsファイルに必要なブレークポイントが設定されないことが原因と考えられます。

私は間違ったことをしています（前にタイプスクリプトのデバッグを行ったことがありません）か、これはIDEAのバグですか？

P.S.リモートJavaScriptデバッグやIDEAの組み込みWebサーバーによるローカルデバッグを使用しても同じ結果が得られます。

Answer 1

トリックは、Webpackの内部URLへの参照をデバッグ設定に追加していました。 Webpack URLに使用するパスは、アプリケーションの実行時にデバッガのスクリプトタブから取得されます。あなたも同じように簡単にChromeのスクリプトタグでそれを見ることができますが、私はここのIntelliJ IDEAからの眺めを含めました：

あなたは webpack://で .パスのように（私のプロジェクトフォルダに対応していることがわかります

その中のsrcパスによって目撃された）。それで、デバッグ設定でWebpackに.パスを使用する必要があると私に伝えました。あなたのプロジェクトが異なる場合は、それに応じて調整する必要があります。

webpack://.の代わりにwebpack:///.（3つのスラッシュを使用）の理由については、私は答えることができません。私はin a JetBrains postを使用していることが分かりました。それが私に、スラッシュを追加するという解決策につながったのです。

今すぐあなたのJavaScriptのデバッグコンフィギュレーションを作成し、次のようにそれを設定する必要があります。

あなたlocalhost URLとポートを調整するだけでなく、多分あなたのビルド・パス（私の場合は__build__、 buildまたはdist）。

私は上記のようなデバッグ構成の設定をしているので、うまくいきます。

Answer 2

私は、この解決策に基づいてIntellij/Webstormのwebpackでデバッグの問題を解決しました：How to debug angular 2 app using angular-cli webpack?。主なuiプロジェクトのディレクトリと.tsソースを持つディレクトリを解決策の場合とまったく同じリモートurlにマップする必要があります。

My tsconfig。json：

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