[JAVA] Debuggen mit VSCode + Next.js + Docker (+ Chrome) (unterstützt sowohl Server- als auch Client-Seite)

Ich habe die Fälle der Vorfahren in meiner eigenen Umgebung reproduziert und einen weiteren Fall erhöht (weil es in Ordnung ist, so etwas zu haben). Chrome steht in Klammern, da nur clientseitiges Debugging verwendet wird

Annahme

1. Chrome ist der Debugging-Browser Für andere Browser lesen Sie bitte die Einstellungen usw.
2. Next.js Version ist 9 Vielleicht funktioniert es mit 10, aber es wurde nicht verifiziert

Implementierungsinhalt

1. Installieren Sie Debugger für Chrome

2. Erstellen Sie .vscode / launch.json und beschreiben Sie den folgenden Inhalt

{
    "version": "0.2.0",
    "configurations": [
        // For server side rendering debug
        {
            "type": "node", //Fest
            "request": "attach", //Fest
            "name": "Next: Node", //Mit deinem Lieblingsnamen
            "port": 9229, // 3.Match mit dem Hafen von
            "address": "localhost", //Grundsätzlich behoben
            "localRoot": "${workspaceFolder}", //Fest
            "remoteRoot": "/src", //Stammverzeichnis der Module in Docker
            "protocol": "inspector" //Fest
        },
        // For client side rendering debug
        {
            "type": "chrome", //Fest(1, wenn Sie den Browser ändern möchten.Bitte ändern Sie mit der Installation von
            "request": "launch", //Fest
            "name": "Next: Chrome", //Mit deinem Lieblingsnamen
            "url": "http://localhost:3000", //Passen Sie den Docker Componse-Port, das Dienstverzeichnis usw. nach Ihren Wünschen an
            "webRoot": "${workspaceFolder}", //Fest
            "sourceMapPathOverrides": { //Fest
                "webpack:///./*": "${webRoot}/src/*"
            }
        }
    ]
}

3. Fügen Sie dem Skript von package.json den folgenden Inhalt hinzu und starten Sie Docker von Next.js

"dev": "node --inspect=0.0.0.0:9229 node_modules/next/dist/bin/next"

Bitte machen Sie den Inhalt, den Docker (Compose) startet, wie oben. Es muss nicht dev sein. Was ist der Hafen usw.

4. Führen Sie "Weiter: Knoten" und "Weiter: Chrome" in "Ausführen" aus

4.1 Wenn Sie "Weiter: Chrome" starten, wird Chrome für das in 1 eingeführte Debugging gestartet.

5. Erfolg, wenn die untere Leiste rot wird

Mit dem oben Gesagten wird es an der Stelle angehalten, an der der Haltepunkt auf der Client- und der Serverseite eingefügt wird. Beachten Sie, dass die Clientseite nur angehalten wird, wenn Sie den Bildschirm in Chrome zeichnen, der mit 4.1 gestartet wurde

Referenz

[VSCoe] Lassen Sie uns mit Visual Studio-Code [Nust.js / Vue.js] remote auf Node.js von Docker debuggen. [Abschied von console.log] So debuggen Sie Next.js mit VS-Code So debuggen Sie JavaScript mit Visual Studio-Code