デバッグノードVSコードのJSコードがWebpackにバンドルされています

Question

私はNode JSとJS開発の方が一般的です。 app-bundle.jsファイルがWebPackにバンドルされています。これはapp.jsファイルから呼び出されます。

私はVisual Studioを使用してデバッグしようとしています。私は、VSコード設定用のlaunch.jsonファイルを作成しました。私はapp.jsまたはapp.bundle.jsにブレークポイントを設定する場合しかし、私は個々のjsファイルにブレークポイントを挿入したとき、私は

Breakpoints set, but not yet bound

を取得しかし、それが正常に動作します。

私launch.jsonは以下の通りです：

{ 
     "type": "node", 
     "request": "launch", 
     "name": "Launch Program", 
     "program": "${workspaceFolder}/app.js" 
} 

にはどうすればVSコードデバッガは、個々のjsファイルで動作するように入手できますか？

Answer 1

私はこの問題を解決できました。

debugは非推奨です。inspectを使用してください。したがって、WebPACKのを使用して構築し、ローカルポートとして9229をデバッグモードでノードを起動するpackage.jsonでスクリプトオブジェクトに次の行を追加します。

"start": "webpack && node --inspect--brk=9229 app.js" 

WebPACKの一つにJSファイルをバンドルしたように、我々はsourcemapを必要とするので、そのVSコードは個々のファイルにブレークポイントを使用できます。 、VSコードで最後に

plugins:[ 
    new webpack.SourceMapDevToolPlugin({ 
     filename: '[name].js.map' 
    }) 
] 

次のようにlaunch.jsonファイル設定：したがって、webpack.config.jsで、SourceMapDevToolPluginを追加

{ 
    "type": "node", 
    "request": "launch", 
    "name": "Launch Program" 

    "stopOnEntry": false, 
    "args": [], 
    "cwd": "${workspaceFolder}, 
    "preLaunchTask": null, 
    "runtimeExecutable": "npm", 
    "runtimeArgs": [ 
     "run-script", "start" 
    ], 
    "env": { 
     "NODE_ENV": "development" 
    }, 
    "console": "integratedTerminal", 
    "port": 9229 
} 

Answer 2

短い答え：

1. 変更対コードデバッグ設定ファイル。
2. npm-scriptコマンドのデバッグを上記の実行スクリプトの値と同じにします。
3. デバッグを開始F5。

設定内容：

{ 
    "name": "Launch via NPM", 
    "type": "node", 
    "request": "launch", 
    "cwd": "${workspaceFolder}", 
    "runtimeExecutable": "npm", 
    "runtimeArgs": [ 
     "run-script", "debug" 
    ], 
    "port": 9229 
} 

参考：

Official Doc