Next 用于调试的 JS 服务器端默认端口

Question

我一直在尝试NextJS通过标记breakpoint. 我正在使用VSCode我的开发。

最初，我的launch.json就是这样。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

这很好用；但是，它不会命中任何服务器端代码，例如getStaticProps,getStaticPaths和getServerSideProps。

我发现这篇博文相信可以解决我的问题。所以我添加了一个脚本到package.json我的launch.json. 所以现在看起来像这样

package.json

{
  "scripts": {
    "debug": "node --inspect-brk ./node_modules/next/dist/bin/next"
  }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Next.js",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "debug"
            ],
            "port": 3000
        }
    ],
    "compounds": [
        {
            "name": "Debug Next.js + Chrome",
            "configurations": [
                "Launch Next.js",
                "Launch Chrome against localhost"
            ]
        }
    ]
}

因此，当我尝试运行它时，我的Launch Next.js配置出现错误。

我相信这是因为我指向了错误的端口。我试图搜索NextJS. 但我找不到一个。

Answer 1

我在 API 上设置断点时遇到同样的问题，所以我花了几个小时才弄清楚真正的问题是什么。最后我发现了问题：

因为当您运行 Nextjs 应用程序时，Node 将首先运行下一个脚本，然后下一个脚本将生成一个子进程，该子进程是您自己的代码。当您使用开发模式时，Nextjs 也会自动设置 NODE_OPTIONS=--inspect，但它使用不同的端口号，并且端口号会自动更改。关键点是：下一个脚本和子进程将具有不同的调试端口号。，这就是有时不能设置断点的原因。

有一些场景：

1. 如果您在 VSCODE 终端中输入“npm run dev”手动启动服务器，VSCODE 将自动查找调试端口，一切都会好起来的。
2. 如果您从终端在 VSCODE 之外启动服务器，然后使用 attach，VSCODE 将仅附加一个端口，通常仅附加到 Nextjs 脚本。这就是为什么你不能在自己的代码中设置断点。
3. 如果您使用launchlaunch.json中的方法启动服务器。那么就会出现同样的问题，如No.2，你无法设置断点。

有一个简单的方法可以解决该问题：从 VSCODE 内部终端启动服务器或在 中launch.json添加：

  "autoAttachChildProcesses": true,

然后你可以按 F5 开始调试，一切顺利。

   {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      },
      "autoAttachChildProcesses": true,
    }