Debugging mit Next.js und VSCode

Dieser Artikel erklärt und stellt vor, wie man launch.json in VSCode erstellt und konfiguriert, um Next.js zu debuggen, Breakpoints zu setzen, interaktive Ausführung und REPL zu ermöglichen.

Ich habe in den letzten Monaten eine SPA-SaaS-App mit React erstellt und fand mich in den Abgrund von SPA-spezifischen Seitengeschwindigkeitsproblemen, API-Drosselung und Caching, Webpack-bundle.js-Splitting, Split-Chunks und Optimierungsproblemen wieder - ich war fast verzweifelt.

Dann erinnerte ich mich an SSR (Server-Side Rendering) und dachte “Lass uns Next.js ausprobieren!” Letzte Woche, während ich bestehenden Code refaktorierte, um zu Next.js zu migrieren, kam unweigerlich das Problem von Debugging und Breakpoints auf.

Ich debugge Node.js-Programme schon eine Weile, also startete ich Debug mit npx, indem ich launch.json so schrieb:

{
  "type": "pwa-node",
  "request": "launch",
  "name": "Nextjs",
  "program": "/home/yuis/.nvm/versions/node/v17.9.0/bin/npx",
  "args": [
    "next",
    "dev",
  ],
  "console": "integratedTerminal",
},

Die meisten Node.js-Programme funktionieren mit dem obigen, wenn sie einfach sind, aber bei Next.js waren Breakpoints sehr langsam beim Starten, und es gab Zeiten, in denen Breakpoints funktionierten und Zeiten, in denen sie nicht funktionierten, was merklich instabil war.

Also machte ich eine schnelle Google-Suche und fand heraus, dass die offizielle Dokumentation das Debugging mit VSCode erwähnt.

Advanced Features: Debugging | Next.js

Es gibt dort drei Konfigurationen, und die dritte hat gut funktioniert:

{
  "name": "Next.js: debug full stack",
  "type": "node-terminal",
  "request": "launch",
  "command": "npm run dev",
  "console": "integratedTerminal",
  "serverReadyAction": {
    "pattern": "started server on .+, url: (https?://.+)",
    "uriFormat": "%s",
    "action": "debugWithChrome"
  }
}

Ich habe die zweite nicht ausprobiert, die sich für die Client-Seite an Chrome anhängt. Client-seitiges JavaScript-Debugging hat React-Quellcode mit Source-Maps, sodass Sie von Chromes Entwicklertools aus debuggen können. Nach meiner Erfahrung macht es die Dinge in VSCode schwerfällig.

Die dritte Konfiguration oben hat keine Probleme mit instabilen Breakpoints, und sie startet, egal ob Sie die Seite neu laden, die URL-Route ändern oder Code vor einem Fehler einfügen, also gibt es keinen Stress.

Auch das Debugging der Produktionsumgebung sollte wahrscheinlich auf die gleiche Weise funktionieren, wenn Sie npm run dev zu npm run start oder npx next start ändern.

Für das Debugging der Produktionsumgebung ist die Automatisierung des Builds praktisch:

# ./.vscode/launch.json
"preLaunchTask": "build",

# ./.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "npm",
      "args": [
        "run",
        "build"
      ],
      "group": "build",
    }
  ]
}

Übrigens ist die VSCode-Version 1.64.2. Sie stammt aus Februar 2022, also etwa 6 Monate alt… Da die automatische Aktualisierung deaktiviert ist, wird sie alt, bevor ich es bemerke. Die Debugging-Instabilität könnte deswegen sein, oder vielleicht auch nicht.

Es ist jedoch auch üblich, dass Dinge aufgrund neuerer Versionen instabil werden, also versuchen Sie, wenn es instabil ist, es mit dem obigen launch.json und dieser VSCode-Version zu fixieren.

Zusammenfassung

Dieser Artikel erklärte, wie man Next.js-Anwendungen in Visual Studio Code (VSCode) debuggt. Hier sind die wichtigsten Punkte:

1. launch.json-Konfiguration: Wir verwenden die launch.json-Datei zum Einrichten des Debuggings. Wir haben eine Konfiguration zum Debuggen von Next.js-Anwendungen bereitgestellt. Die Konfiguration umfasst Eigenschaften wie:

   • "name": Name der Debug-Konfiguration
   • "type": Art des Debuggings (Verwendung von “node-terminal”)
   • "request": Art der Debug-Anfrage (Angabe von “launch”)
   • "command": Auszuführender Befehl (Starten der Next.js-App mit “npm run dev”)
   • "console": Art der Debug-Konsole (Verwendung von “integratedTerminal”)

2. Debug-Konfigurations-Stabilität: Aus mehreren Debug-Konfigurationen haben wir eine ausgewählt, bei der Breakpoints stabil funktionieren und Code vor Fehlern eingeben kann. Die "serverReadyAction"-Konfiguration ist besonders wichtig und wird verwendet, um zu warten, bis der Server startet, bevor das Debugging beginnt.

3. Debugging in der Produktionsumgebung: Wir haben Build-Task- und Debug-Task-Konfigurationen zum Debuggen in der Produktion bereitgestellt. Dies bereitet Sie auch auf das Debugging in der Produktion vor.

4. VSCode-Version: Wir erwähnten, dass die VSCode-Version zum Zeitpunkt des Schreibens 1.64.2 war. Da ältere Versionen von VSCode stabileres Debugging haben können, empfahlen wir, ältere Versionen auszuprobieren, wenn die neueste Version instabil ist.

Mit diesen Konfigurationen und Ansätzen können Sie Next.js-Anwendungen in VSCode stabil und effektiv debuggen.