Next.js高级特性：调试

本文档介绍了如何使用Chrome DevTools或VSCode调试器通过完整的源映射支持调试Next.js前端和后端代码。

它要求您首先在一个终端中以调试模式启动Next.js应用程序，然后将检查器（Chrome DevTools或VS Code）连接到它。

调试Next.js应用程序可能会有更多方法，因为它所需的全部就是公开Node.js调试器并启动检查器客户端。您可以在Node.js文档中找到更多详细信息。

步骤1：以调试模式启动Next.js

Next.js是一个Node.js应用程序，我们要做的就是将--inspect标志传递给底层Node.js进程，以使其在调试模式下启动。

首先，使用inspect标志启动Next.js：

如果您使用npm run dev或yarn dev，则应在dev上更新脚本package.json：

"dev": "NODE_OPTIONS='--inspect' next dev"

使用inspect标志启动Next.js的结果如下所示：

Debugger listening on ws://127.0.0.1:9229/0cf90313-350d-4466-a748-cd60f4e47c95
For help, see: https://nodejs.org/en/docs/inspector
ready - started server on http://localhost:3000

请注意，使用NODE_OPTIONS='--inspect' npm run dev或NODE_OPTIONS='--inspect' yarn dev将无法使用。这将尝试在同一端口上启动多个调试器：一个用于npm / yarn进程，另一个用于Next.js。然后，您将Starting inspector on 127.0.0.1:9229 failed: address already in use在控制台中得到类似的错误。

步骤2：连接到调试器

使用Chrome DevTools

在Google Chrome浏览器中打开新标签并转到之后chrome://inspect，您应该在“远程目标”部分中看到Next.js应用程序。现在，单击“检查”以打开一个屏幕，此屏幕将从现在开始成为您的调试环境。

在Visual Studio Code中使用调试器

我们将使用VS Code的附加模式将VS Code检查器附加到我们在步骤1中启动的正在运行的调试器中。

创建一个.vscode/launch.json在项目根目录下命名的文件，其内容如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Launch Program",
      "skipFiles": ["/**"],
      "port": 9229
    }
  ]
}

现在按F5或选择“调试：从命令面板开始调试”，就可以开始调试会话。

步骤3：放置断点，看看会发生什么

现在，您可以在debugger任何时候想要更精确地观察和调试代码时，使用该语句暂停后端或前端代码。

如果通过刷新当前页面，单击页面链接或获取API路由来触发基础代码，则代码将被暂停，并且调试器窗口将弹出。

要了解有关如何使用JavaScript调试器的更多信息，请查看以下文档：

作者：terry，如若转载，请注明出处：https://www.web176.com/nextjs/2394.html