Razzle: Debuggen Sie den Knotenserver mit vscode

Ich habe viel Glück mit Attach by Process ID. Es gibt auch eine sourceMaps vscode-Startkonfigurationsoption, die Sie auf „true“ setzen können.

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

@ajsharp danke für deine Antwort :smiley_cat:

Dasselbe wie bei der Attach-Methode. Ich kann keinen Breakpoint in src/index.js setzen.

Die Option sourceMaps ist standardmäßig wahr (vgl. https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps)

Ich habe das mit einer anderen Sourcemap-Einstellung gelöst, VSCode scheint die cheap-module-sourcemap nicht zu mögen.
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
}

und starte den Server mit yarn start --inspect --inspect-port 9230

*bearbeitet, danke @dguyonvarch für das Abfangen des Fehlers.

@benhamlin :smile_cat: Es funktioniert gut!
Ich habe gerade deinen Snippet korrigiert mit:

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

Ich finde das in razzle/packages/razzle/config/createConfig.js Zeile 93:

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

Damit eröffne ich den Streit :wink: ! Warum cheap-module-source-map statt eval-source-map

Möchte jemand einen Abschnitt über dieses Rezept zu den Dokumenten hinzufügen?

@jaredpalmer Darf ich eine Merge-Anfrage mit eval-source-map vorschlagen? In diesem Fall muss das Dokument nicht aktualisiert werden.

Hallo! Also hier ist der Deal, zwischen Open Source und meinem Job und Leben und was nicht, ich habe eine Menge zu verwalten, also benutze ich einen GitHub-Bot, um hier und da ein paar Dinge zu automatisieren. Dieser spezielle GitHub-Bot wird dies als veraltet markieren, da er seit einiger Zeit keine Aktivitäten mehr hatte. Es wird geschlossen, wenn in einigen Tagen keine weiteren Aktivitäten stattfinden. Nehmen Sie dies nicht persönlich – ernsthaft – dies ist eine vollständig automatisierte Aktion. Wenn dies ein Fehler ist, machen Sie einfach einen Kommentar, senden Sie mir eine DM, senden Sie eine Brieftaube oder ein Rauchzeichen.

ProBot hat dies aufgrund von Inaktivität automatisch geschlossen. Holler, wenn dies ein Fehler ist, und wir werden es wieder öffnen.

Update: Eine bessere Möglichkeit, vscode zum Debuggen des Servers zu bringen, besteht darin, dies zu Ihrer launch.json hinzuzufügen und die devtool-Konfiguration auf der Standardeinstellung von Razzle zu belassen.

Dies ermöglicht das VSCode-Debugging sowie ein besseres Client-Debugging-Erlebnis (eval-source-maps unterbricht den Debug-Fehler-Viewer von React).

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

Danke @benhamlin. Können Sie sich nach einem sanften Neustart ( rs dann ENTER ) in Razzle einfach wieder mit der Debugger-Instanz in VSCode verbinden?

ATM, wenn ich einen Soft-Neustart mache, wird der VSCode-Debugger getrennt, also muss ich den Server beenden und neu starten und dann den Debugger wieder verbinden.

@benhamlin Mit dieser Konfiguration funktioniert es wie ein Zauber :wink:

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

@ourmaninamsterdam RS startet den Server auf einem neuen Debug-Port (9230 + 1) neu, daher müssen Sie den Attach-Port in der Startkonfiguration ändern. Ich habe nicht weiter nachgeforscht :enttäuscht: