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 devyarn 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 devNODE_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

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月16日 下午6:15
下一篇 2021年4月16日 下午6:37

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注