Debugging vscode-js-debug

Debugging vscode-js-debug.md

Debugging vscode-js-debug

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: {

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Launch Program"
        }
    ]
}

$ docker run --rm -itp 9229:9229 -p 9230:9230 -p 3000:3000 -v "$PWD:/app" -w /app alpine:3.20
/app # apk add nodejs npm
/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 # mkdir .vscode
/app/app # cp ../launch.json .vscode
/app/app # npx next dev

$ git clone https://github.com/microsoft/vscode-js-debug
$ cd vscode-js-debug
$ npm i

• Uncomment the preLaunchTask line in launch.json
• Set isNightly to false in gulpfile.js
• Set a breakpoint e.g. here
• Open Run and Debug (Ctrl-Shift-D)
• Choose the Extension configuration
• Run the project (F5)
• Open the Next.js project in the new vscode window (Ctrl-K Ctrl-O)
• Set a breakpoint at the beginning of the Home() function in pages/index.js
• Run the project (F5)

At some point you might need to open localhost:3000.