调试

本指南介绍 AdonisJS 应用的调试技术。你将学习如何:

  • 配置 VSCode 通过断点调试你的应用
  • 从命令行使用 Node.js 检查器
  • 使用 NODE_DEBUG 查看框架级别的调试日志
  • 使用 Edge 模板中的 @dump@dd 检查变量
  • 在开发期间启用精美的错误页面

概述

调试是开发中必不可少的一部分,AdonisJS 支持根据你的需求采用多种方法。对于快速检查,一个简单的 console.log 语句通常就足够了。对于更复杂的问题,你可以使用 VSCode 集成的调试器设置断点、逐步执行代码并检查变量。当你需要了解框架内部发生的情况时,调试日志可以让你看到 AdonisJS 的内部运作。

Edge 模板有自己的调试工具 @dump@dd,它们会直接在浏览器中渲染变量的内容。在开发期间,当发生问题时,异常处理器会自动显示带有堆栈跟踪和请求信息的详细错误页面。

VSCode 调试器

VSCode 调试器提供了最强大的调试体验,允许你设置断点、逐行执行代码,并检查调用栈和变量。当你调试无法用简单日志语句解决的复杂问题时,请使用这种方法。

在你的项目根目录中创建一个 .vscode/launch.json 文件,包含开发服务器、测试运行器和附加模式的配置。

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Dev server",
      "program": "${workspaceFolder}/ace.js",
      "args": ["serve", "--hmr"],
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Tests",
      "program": "${workspaceFolder}/ace.js",
      "args": ["test", "--watch"],
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach Program",
      "port": 9229,
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Dev server 配置以启用 HMR 的方式启动你的应用,非常适合调试 HTTP 请求处理、中间件和控制器。Tests 配置以监视模式运行你的测试套件,允许你通过在测试文件或应用代码中设置断点来调试失败的测试。

调试 Ace 命令

Attach Program 配置使用附加模式,而不是启动特定的命令。这让你可以调试任何 Ace 命令——使用 --inspect 标志启动它,然后附加调试器。

要调试 Ace 命令:

  1. 使用 Cmd+Shift+P(macOS)或 Ctrl+Shift+P(Windows/Linux)打开命令面板
  2. 搜索 Debug: Select and Start Debugging
  3. 选择 Attach Program 选项
  4. 使用 --inspect 标志运行你的 Ace 命令。
node --inspect ace migration:run

调试器会附加到正在运行的进程,你的断点会被命中。

Node.js 检查器

如果你没有使用 VSCode,或者更喜欢不同的调试界面,你可以直接使用 Node.js 检查器。使用 --inspect 标志启动你的开发服务器。

node ace --inspect serve --hmr

这会在端口 9229 上启动 Node.js 检查器。然后你可以通过在 Chrome 中导航到 chrome://inspect 使用 Chrome DevTools 连接,或者使用任何其他支持 Node.js 检查器协议的调试器。

框架调试日志

AdonisJS 包包含调试日志,可让你了解框架内部的情况。这些日志默认是禁用的,因为它们非常冗长,但当你需要了解框架层面发生的情况时,它们非常有价值。

在启动应用时,通过设置 NODE_DEBUG 环境变量来启用调试日志。

NODE_DEBUG=adonisjs:* node ace serve --hmr

通配符 * 启用所有 AdonisJS 包的日志。如果你已经知道要调查哪个包,可以直接指定它以减少噪音。

# 仅调试 HTTP 层
NODE_DEBUG=adonisjs:http node ace serve --hmr

# 调试会话处理
NODE_DEBUG=adonisjs:session node ace serve --hmr

# 调试应用生命周期
NODE_DEBUG=adonisjs:app node ace serve --hmr

包名遵循 adonisjs:<package-name> 的约定,其中包名对应于你想要调试的 AdonisJS 包。

Edge 模板调试

使用 Edge 模板时,你可以使用 @dump@dd 在浏览器中直接检查变量。这些标签会渲染任何值的格式化表示,让你轻松理解模板接收到了哪些数据。

@dump 标签

@dump 标签输出一个值的格式化表示,并继续渲染模板的其余部分:

resources/views/posts/show.edge
{{-- 检查组件属性 --}}
@dump($props.all())

{{-- 检查整个模板状态 --}}
@dump(state)

{{-- 检查特定变量 --}}
@dump(post)

@dd 标签

@dd 标签(dump and die)会立即停止模板渲染,并且只显示被 dump 的值。当你想专注于某个特定值而不需要页面其余输出时,请使用它:

resources/views/posts/show.edge
@dd(post)

{{-- 这一行以下的内容都不会渲染 --}}
<h1>{{ post.title }}</h1>

设置 dumper

@dump@dd 标签需要加载 dumper 的前端资源。将 @stack('dumper') 指令添加到你布局的 <head> 部分。

resources/views/layouts/main.edge
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @stack('dumper')
  </head>
  <body>
    @!section('content')
  </body>
</html>

官方的 AdonisJS 起步套件默认包含此设置。

配置 dumper

你可以通过从 config/app.ts 导出一个 dumper 配置来自定义 dumper 格式化输出的方式。

config/app.ts
import { defineConfig as dumperConfig } from '@adonisjs/core/dumper'

export const dumper = dumperConfig({
  /**
   * 控制台输出设置(例如 console.log)
   */
  console: {
    depth: 10,
    collapse: ['DateTime', 'Date'],
    inspectStaticMembers: true,
  },

  /**
   * HTML 输出设置(@dump 和 @dd)
   */
  html: {
    depth: 10,
    inspectStaticMembers: true,
  },
})

consolehtml 打印机都可以使用以下选项。

showHidden
boolean false

包含不可枚举的属性

depth
number 5

嵌套结构(对象、数组、映射、集合)的最大深度

inspectObjectPrototype
boolean | string unless-plain-object

包含原型属性。设置为 true 表示所有对象,false 表示都不包含,或 'unless-plain-object' 表示仅类实例。

inspectArrayPrototype
boolean false

包含数组原型属性

inspectStaticMembers
boolean false

包含类的静态成员

maxArrayLength
number 100

数组、映射和集合显示的最大项数

maxStringLength
number 1000

字符串显示的最大字符数

collapse
string[] []

不应进一步展开的构造函数名称数组

异常处理器调试模式

在开发期间,当发生未处理的异常时,AdonisJS 会显示由 Youch 提供支持的 详细错误页面 。这些页面包含完整的堆栈跟踪、请求信息和应用状态,使诊断问题变得容易。

调试模式在开发环境中自动启用,在生产环境中禁用。此行为由异常处理器配置控制。