Debugging a nextjs project with vscode and --turbo

Debugging a nextjs project with vscode and --turbo.md

Debugging a nextjs project with vscode and --turbo

Create a nextjs project:

next+14.2.5.patch (the name should match the nextjs version):

diff --git a/node_modules/next/dist/cli/.next-dev.js.swp b/node_modules/next/dist/cli/.next-dev.js.swp
new file mode 100644
index 0000000..59ed063
Binary files /dev/null and b/node_modules/next/dist/cli/.next-dev.js.swp differ
diff --git a/node_modules/next/dist/cli/next-dev.js b/node_modules/next/dist/cli/next-dev.js
index f7a7240..ded82a8 100644
--- a/node_modules/next/dist/cli/next-dev.js
+++ b/node_modules/next/dist/cli/next-dev.js
@@ -207,9 +207,7 @@ const nextDev = async (options, portSource, directory)=>{
                 const totalMemInMB = Math.floor(totalMem / 1024 / 1024);
                 NODE_OPTIONS = `${NODE_OPTIONS} --max-old-space-size=${Math.floor(totalMemInMB * 0.5)}`;
             }
-            if (nodeDebugType) {
-                NODE_OPTIONS = `${NODE_OPTIONS} --${nodeDebugType}=${(0, _utils.getDebugPort)() + 1}`;
-            }
+            NODE_OPTIONS = `${NODE_OPTIONS} --inspect-brk=0.0.0.0:9229`;
             child = (0, _child_process.fork)(startServerPath, {
                 stdio: "inherit",
                 env: {

$ docker run --rm -it \
  -p 9229:9229 -p 9230:9230 -p 3000:3000 \
  -v "$PWD:/app" -w /app \
  -e "HOST_UID=$UID" \
  alpine:3.20
/app # apk add nodejs npm shadow
/app # useradd -m a -u "$HOST_UID"
/app # su a
/app $ npx create-next-app --js --no-eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*" app
/app $ cd app
/app/app $ npm i patch-package
/app/app $ mkdir patches
/app/app $ cp ../next+14.2.5.patch patches
/app/app $ npx patch-package
/app/app $ npx next dev

• Open vscode
• Open ${workspaceFolder}/pages/index.js (Ctrl-O)
• Add debugger to the beginning of Home()
• Ctrl-Shift-P, Debug: Attach to Node Process
• Choose the /usr/bin/node /app/app/.../start-server.js process
• Press F5 (Continue)
• Open localhost:3000 in a browser

Now try it with --turbo:

/app/app $ npx next dev --turbo

At the end of [root of the server]__92c0a2._.js we see:

//# sourceMappingURL=%5Broot%20of%20the%20server%5D__92c0a2._.js.map

And the file exist in the container at /app/app/.next/server/chunks/ssr/[root of the server]__92c0a2._.js.map. vscode can't find it because ${workspaceFolder} in the container and on the host doesn't match. To make it work:

• Open the directory in vscode (Ctrl-K Ctrl-O)
• Open Run and Debug (Ctrl-Shift-D)
• Click "create a launch.json file."
• Replace the contents with:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Next.js",
            "remoteRoot": "/app/app"
        }
    ]
}

• Run (F5)
• Open localhost:3000 in a browser

Why does it work with webpack without remoteRoot? Because webpack inlines the source maps (in this case):

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlI...

See e.g. .next/server/pages/index.js.