vsコードでwebpack devサーバーをデバッグしますか？

Question

webpack dev serverのデバッグにlaunch.jsonを設定することはできますか？私のケースでは、私はユニバーサル（サーバレンダリングを介して表現する）リアクションアプリに取り組んでおり、VSコードで直接サーバー側をデバッグできることは本当にうれしいでしょう。

Answer 1

私はWebpackを使用してVueJSアプリケーションを開発していましたが、VSCodeクロムデバッガを使用して数時間掘り下げて正常にデバッグできました。私はあなたのアプリケーションがReact 1であることを知っていますが、私はデバッグ作業を行うために行った手順を説明して説明します。うまくいけば、VSCodeのreact/webpackアプリケーションをデバッグするためにlaunch.jsonを設定するのに役立ちます。ここに私の最後のlaunch.jsonた：

{ 
     // Using the chrome debugger to debug a Vue application 
     "type": "chrome", 
     "request": "launch", 
     "name": "Chrome launch", 
     // Set the URL to match the root URL of your application 
     "url":"http://localhost:8000/#/", 
     "webRoot": "${workspaceRoot}", 
     /** Configure source map paths using the instructions below */ 
     "sourceMapPathOverrides": { 
      "webpack:///./src/*.js": "${workspaceRoot}/src/*.js", 
      "webpack:///src/*.vue": "${workspaceRoot}/src/*.vue", 
      "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*" 
     } 
    } 

私のためのキーが正しくlaunch.jsonでsoureMapPathOverridesオプションを設定しました。まず、webpack設定の "devtool"オプションが "source-map"または "cheap-eval-source-map"（私は "source-map"を使用していました。私はそれらをテストしていない）。あなたが何をしたいかsourceMapPathOverrides--

を--Setting

は、ローカルマシン上の対応する場所に（誤っ少なくとも私にとっては、デフォルトでマッピングされているように見える）ソースマップファイルをマップです。これを行うには、通常webpack-dev-serverまたはwebpackを使用してプログラムを実行します。その後、Chromeで開き、devtoolsの[sources]タブを開きます。 [ソース]タブのナビゲータ（デフォルトでは左側）で、[ネットワーク]タブを開き、フォルダ構造を確認します。

次のようなものであるフォルダ構造が表示されるはずです。

top 
    localhost:8000 
     assets 
     src 
     ... 
    (no domain) 
     ... 
    webpack:// 
     (webpack) 
      ... 
     (webpack)-dev-server 
      ... 
     . 
      ... 
     src 
      ... 

さて、あなたはどこかここtranspiledファイルと元のソースファイルの両方を見つけることができ（そうでない場合は、あなたの「devtoolをダブルチェックする必要がありますが"は" source-map "または" cheap-eval-source-map "に設定されていましたが、各ソースファイルをハードドライブ上の場所にマップする必要があります。 Vueの場合は、.jsファイルと.vueファイルを対応する場所にマップする必要がありました（launch.jsonで見られるように、node-modulesフォルダは別々にマップされています）。おそらく別のものになるでしょう反応のためのマッピング。

launch.jsonのURLをwebpackアプリケーションのURLと一致するように設定し、launch.jsonを設定する必要があります。

これで、webpack-dev-server（またはwebpack）を使用してファイルを実行し、デバッガを起動できるはずです。 VSCodeでブレークポイントを設定し、通常通りデバッグできるはずです。うまくいけば、これは誰かを助けるでしょう