Debug with VSCode + Next.js + Docker (+ Chrome) (supports both server side and client side)

I reproduced the cases of the ancestors in my own environment and added another case (because it is okay to have something like this) Chrome is in parentheses because it only uses client-side debugging

Premise

1. Chrome is the debug browser For other browsers, please read the settings etc.
2. Next.js version is 9 Maybe it works with 10 but it hasn't been verified

Implementation content

1. Install Debugger for Chrome

2. Create .vscode/launch.json and describe the following contents

{
    "version": "0.2.0",
    "configurations": [
        // For server side rendering debug
        {
            "type": "node", //Fixed
            "request": "attach", //Fixed
            "name": "Next: Node", //With your favorite name
            "port": 9229, // 3.Match with the port of
            "address": "localhost", //Basically fixed
            "localRoot": "${workspaceFolder}", //Fixed
            "remoteRoot": "/src", //Module root directory in Docker
            "protocol": "inspector" //Fixed
        },
        // For client side rendering debug
        {
            "type": "chrome", //Fixed(1 if you want to change the browser.Please change with the installation of
            "request": "launch", //Fixed
            "name": "Next: Chrome", //With your favorite name
            "url": "http://localhost:3000", //Customize the Docker Componse port, service directory, etc. to your liking
            "webRoot": "${workspaceFolder}", //Fixed
            "sourceMapPathOverrides": { //Fixed
                "webpack:///./*": "${webRoot}/src/*"
            }
        }
    ]
}

3. Add the following contents to the script of package.json and start Docker of Next.js

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

Please make the contents that Docker (Compose) starts above. It doesn't have to be dev. What is the port etc.

4. Execute Next: Node and Next: Chrome in Run respectively

4.1 When you start Next: Chrome, Chrome for debugging introduced in 1 will start.

5. Success if the bottom bar turns red

With the above, it will stop at the place where the breakpoint is pasted on each of the client side and the server side. Note that the client side will not stop unless you draw the screen in Chrome started with 4.1

reference

[VSCoe] Let's debug remotely to Docker's Node.js with Visual Studio Code [Nust.js / Vue.js] [Farewell to console.log] How to debug Next.js with VS Code How to debug JavaScript with Visual Studio Code