Razzle: vscodeを使用してノードサーバーをデバッグします

プロセスIDによるアタッチで頑張っています。 trueに設定できるsourceMaps vscode起動構成オプションもあります。

    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "restart": true
    }

@ajsharpお返事ありがとうございます：smiley_cat：

アタッチ方法と同じです。 src /index.jsにブレークポイントを設定できません。

sourceMapsオプションはデフォルトでtrueです（https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-mapsを参照）

別のソースマップ設定を使用してこれを解決しました。VSCodeはcheap-module-sourcemapのものを好まないようです。
razzle.config.js ：

module.exports = {
    modify(config, { target, dev }, webpack) {
        config.devtool = dev ? 'eval-source-map' : 'none';
        return config;
    }
}

launch.json ：

{
    "name": "Attach to dev server",
    "type": "node",
    "request": "attach",
    "protocol": "inspector",
    "address": "localhost",
    "port": 9230
}

yarn start --inspect --inspect-port 9230でサーバーを起動します

*編集、エラーをキャッチしてくれた@dguyonvarchに感謝します。

@benhamlin ：smile_cat：正常に動作します！
スニペットを次のように修正しました：

module.exports = {
  modify: (config, { target, dev }, webpack) => {
      config.devtool = dev ? 'eval-source-map' : 'none';
      return config
  }
}

これはrazzle/packages/razzle/config/createConfig.jsの93行目にあります。

// Controversially, decide on sourcemaps.
devtool: 'cheap-module-source-map'

だから私は物議を醸す：wink：！ $＃ eval-source-map cheap-module-source-map選ぶ理由

このレシピに関するセクションをドキュメントに追加したい人はいますか？

@jaredpalmer eval-source-mapでマージリクエストを提案できますか？ この場合、ドキュメントを更新する必要はありません。

ホラ！ これがオープンソースと私の日常の仕事と生活の間の取り決めです。管理することがたくさんあるので、GitHubボットを使用してあちこちでいくつかのことを自動化します。 この特定のGitHubボットは、最近のアクティビティがしばらくないため、これを古いものとしてマークします。 数日以内にそれ以上の活動が発生しない場合は閉鎖されます。 これを個人的に（真剣に）行わないでください。これは完全に自動化されたアクションです。 これが間違いである場合は、コメントするか、DMを送信するか、キャリアピジョンを送信するか、発煙信号を送信してください。

非アクティブのため、ProBotはこれを自動的に閉じました。 これが間違いである場合はホラー、それを再開します。

更新：vscodeでサーバーをデバッグするためのより良い方法は、これをlaunch.jsonに追加し、devtool構成をrazzleのデフォルトのままにすることです。

これにより、VSCodeのデバッグが可能になるだけでなく、クライアントのデバッグエクスペリエンスも向上します（eval-source-mapsはReactのデバッグエラービューアーを壊します）。

"sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/*"
 }

@benhamlinに感謝します。 Razzleでソフトリスタート（ rs 、次にENTER ）を実行した後、VSCodeでデバッガーインスタンスに簡単に再接続する方法がある場合はどうでしょうか。

ATMをソフトリスタートすると、VSCodeデバッガーが切断されるため、サーバーを強制終了して再起動してから、デバッガーを再接続する必要があります。

@benhamlinこの構成では魅力のように機能します：wink：

{
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9230,
      "sourceMapPathOverrides": {
         "webpack:///*": "${workspaceRoot}/*"
      }
}

@ourmaninamsterdam RSは、新しいデバッグポート（9230 + 1）でサーバーを再起動するため、起動構成で接続ポートを変更する必要があります。 私はこれ以上調査しませんでした：失望：