ChromeのVSCode/Javascriptにブレークポイントが設定されていません

Question

私はthis guideのjavascriptとwebpackを使用してnode.js Webアプリケーションを実行しています。 Chromeのデバッガ拡張機能をインストールしました。

私はコマンドを使用してノード・サーバを実行します。

webpack-dev-server --progress --colors 

私もWebPACKの--devtoolソースマップを実行した

私の打ち上げの設定は次のようになります。

{ 
    // Use IntelliSense to learn about possible attributes. 
    // Hover to view descriptions of existing attributes. 
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome against localhost", 
      "url": "http://localhost:8080", 
      "webRoot": "${workspaceFolder}" 
     } 
    ] 
} 

webpack-dev-server --progress -colorsを実行してVSCodeでF5を押すと、WebページでChromeが読み込まれますが、ブレークポイントはすべて赤色で表示されますが、配置された時点では、コードを実行している行には表示されません）。ブレークポイントもヒットしないので、デバッグマッピングに何か問題があると思います。私がブレークポイントを置いたときにランダムなファイルがロードされ、node_modules/firebase/index.jsのような目に見えないブレークポイントがヒットします。コメントアウトされた行の目に見えないブレークポイントがヒットします。

vscodeの.scriptsを実行すると、（私の）entry.jsファイル（すべてのモジュールの中で）がブレークポイントをヒットしようとしています。つまり、-webpack：///./entry.js d：\ myproject \ entry.js）

すべてが私のディレクトリのルートに置かれます（ディレクトリを間違えた場合のスクリーンショット）。

また、私webpack.config.jsファイル：

module.exports = { 
    entry: "./entry.js", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    } 
}; 

Answer 1

問題は解決します！

devtool: 'inline-source-map' 

を私webpack.config.jsのmodule.exportsはへ：追加する必要

。現在、ブレークポイントはどこの関数でもインラインでヒットします。