[JAVA] Déboguer avec VSCode + Next.js + Docker (+ Chrome) (prend en charge à la fois le côté serveur et le côté client)

J'ai reproduit les cas des ancêtres dans mon propre environnement et augmenté un autre cas (car c'est normal d'avoir quelque chose comme ça) Chrome est entre parenthèses car il n'utilise que le débogage côté client

supposition

1. Chrome est le navigateur de débogage Pour les autres navigateurs, veuillez lire les paramètres, etc.
2. La version Next.js est 9 Peut-être que cela fonctionne avec 10 mais cela n'a pas été vérifié

Contenu de la mise en œuvre

1. Installez Debugger for Chrome

2. Créez .vscode / launch.json et décrivez le contenu suivant

{
    "version": "0.2.0",
    "configurations": [
        // For server side rendering debug
        {
            "type": "node", //Fixé
            "request": "attach", //Fixé
            "name": "Next: Node", //Avec ton nom préféré
            "port": 9229, // 3.Match avec le port de
            "address": "localhost", //Fondamentalement fixe
            "localRoot": "${workspaceFolder}", //Fixé
            "remoteRoot": "/src", //Répertoire racine des modules dans Docker
            "protocol": "inspector" //Fixé
        },
        // For client side rendering debug
        {
            "type": "chrome", //Fixé(1 si vous souhaitez changer de navigateur.Veuillez changer avec l'installation de
            "request": "launch", //Fixé
            "name": "Next: Chrome", //Avec ton nom préféré
            "url": "http://localhost:3000", //Personnalisez le port Docker Componse, le répertoire de services, etc. à votre guise
            "webRoot": "${workspaceFolder}", //Fixé
            "sourceMapPathOverrides": { //Fixé
                "webpack:///./*": "${webRoot}/src/*"
            }
        }
    ]
}

3. Ajoutez le contenu suivant au script de package.json et démarrez Docker de Next.js

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

Veuillez créer le contenu que Docker (Compose) démarre comme ci-dessus. Cela n'a pas à être dev. Quel est le port etc.

4. Exécutez Next: Node et Next: Chrome dans Run respectivement

4.1 Lorsque vous démarrez Next: Chrome, Chrome pour le débogage introduit dans 1 démarre.

5. Succès si la barre inférieure devient rouge

Avec ce qui précède, il s'arrêtera à l'endroit où le point d'arrêt est collé respectivement côté client et côté serveur. Notez que le côté client ne s'arrêtera que si vous dessinez l'écran dans Chrome démarré avec 4.1

référence

[VSCoe] Débogageons à distance vers Node.js de Docker avec Visual Studio Code [Nust.js / Vue.js] [Adieu console.log] Comment déboguer Next.js avec VS Code Comment déboguer JavaScript avec Visual Studio Code