デバッグ

このガイドでは、VSCodeデバッガーの使用からDump and Dieの使用、フレームワークのデバッグログの表示まで、AdonisJSアプリケーションのデバッグ方法を複数探ります。

VSCodeデバッガーを使用してデバッグ

VSCodeデバッガーを使用してAdonisJSアプリケーションをデバッグするのは簡単です。.vscode/launch.jsonファイルを作成し、Node.jsデバッガーを使用するだけです。

次の例では、AdonisJS開発サーバーをデバッグモードで開始し、VSCodeデバッガーをそれにアタッチするための設定を定義します。

.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>/**"]
    }
  ]
}

デバッグを開始するには:

(CMD + Shift + P)でコマンドパレットを開きます。
Debug: Select and Start Debuggingを検索します。.vscode/launch.jsonファイルからの起動オプションのリストが表示されます。
Dev serverオプションを選択して、VSCodeデバッガーでHTTPサーバーを実行します。

テストのデバッグ

デバッグモードでテストを実行するための別の起動オプションを定義できます。

.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>/**"]
    }
  ]
}

他のすべてのAceコマンドのデバッグ

すべてのaceコマンドに対して個別の起動オプションを定義するのは実用的ではありません。したがって、.vscode/launch.jsonファイル内にattach設定を定義できます。

attachモードでは、VSCodeがデバッガーをアタッチしますが、VSCode統合ターミナルから--inspectフラグを使用してプロセスが開始された場合に限ります。

まず、.vscode/launch.jsonファイルを変更し、次の設定を追加します。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach Program",
      "port": 9229,
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "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>/**"]
    }
  ]
}

アタッチモードでデバッグを開始するには:

(CMD + Shift + P)でコマンドパレットを開きます。
Debug: Select and Start Debuggingを検索します。.vscode/launch.jsonファイルからの起動オプションのリストが表示されます。
Attach Programオプションを選択します。
--inspectフラグを使用してAceコマンドを実行します。例えば:
```
node --inspect ace migration:run
```

Edgeテンプレートのデバッグ

EdgeテンプレートをTypeScriptで書かれたアプリケーションコードと同様にデバッグできます。ただし、EdgeではVSCodeが提供するブレークポイントを使用できません。代わりに、@debuggerタグを使用してコード内ブレークポイントを定義する必要があります。

デバッガーはEdgeテンプレートのコンパイルされた出力を表示します。

@debugger

Dump and Die

Dump and Die（ddとして知られる）は、もっとも愛されているデバッグ技術であるconsole.logに似ています。ただし、ddヘルパーは例外をスローして実行を停止し、ブラウザまたはターミナル内に出力を表示します。

HTTPリクエスト中にddヘルパーを使用すると、出力はHTMLドキュメントとしてレンダリングされます。それ以外の場合、出力はターミナル内に表示されます。

start/routes.ts

import User from '#models/user'
import router from '@adonisjs/core/services/router'
import { dd } from '@adonisjs/core/services/dumper'

router.get('/users', async () => {
  const users = await User.all()
  /**
   * "/users"エンドポイントにアクセスしてダンプされた値を表示します
   */
  dd(users)
  return users
})

ddの出力はconsole.logを使用した場合と若干異なります。

値がダンプされたソースコードの場所を確認できます。
クラスの静的プロパティとオブジェクトのプロトタイププロパティを表示できます。
デフォルトでは、10レベル深くまでのネストされた値が表示されます。
HTML出力のための複数のテーマをサポートしています。nightOwl、catppuccin、minLightから選択できます。

Edgeテンプレートのデバッグ用ヘルパー

Edgeテンプレート内で@ddタグを使用してddヘルパーを使用できます。さらに、例外をスローせずにテンプレートの残りをレンダリングし続ける@dumpヘルパーも使用できます。

{{-- テンプレートの状態をダンプして停止 --}}
@dd(state)

{{-- テンプレートの状態をダンプしてレンダリングを続行 --}}
@dump(state)

ダンパー設定

config/app.tsファイル内でダンパー設定を構成できます。このファイルは、以下のようにdumper設定オブジェクトをエクスポートする必要があります。

config/app.ts

/**
 * "dd"ヘルパーによって使用されるグローバル設定。 "console"と"html"プリンターの両方の設定を個別に構成できます。
 */
export const dumper = dumperConfig({
  /**
   * コンソールプリンターの設定
   */
  console: {
    depth: 10,

    /**
     * さらに展開されるべきでないオブジェクト。配列はオブジェクトコンストラクタ名の配列を受け入れます。
     */
    collapse: ['DateTime', 'Date'],
    inspectStaticMembers: true,
  },

  /**
   * HTMLプリンターの設定
   */
  html: {
    depth: 10,
    inspectStaticMembers: true,
  },
})

showHidden

trueに設定すると、オブジェクトの非列挙プロパティが処理されます。デフォルト: false

depth

ネストされた値の解析を停止する深さ。深さはすべてのツリー状データ構造（例えば、オブジェクト、配列、マップ、セット）で共有されます。デフォルト: 5

inspectObjectPrototype

オブジェクトのプロトタイププロパティを検査します。プロトタイプの非列挙プロパティはデフォルトで含まれます。デフォルト: 'unless-plain-object'。

trueに設定すると、すべてのオブジェクトのプロトタイププロパティが処理されます。
falseに設定すると、プロトタイププロパティは処理されません。
'unless-plain-object'に設定すると、クラスインスタンスのプロトタイププロパティが処理されます。

inspectArrayPrototype

配列のプロトタイププロパティを検査します。デフォルト: false。

inspectStaticMembers

クラスの静的メンバーを検査します。関数とクラスは技術的には同じですが、この設定は[class]キーワードを使用して定義された関数にのみ適用されます。デフォルト: false。

maxArrayLength

配列、マップ、およびセットのメンバーを処理する最大数。デフォルト: 100。

maxStringLength

文字列を表示する最大文字数。デフォルト: 1000。

collapse

さらに検査されるべきでないオブジェクトコンストラクタ名の配列。

フレームワークのデバッグログ

NODE_DEBUG環境変数を使用してフレームワークのデバッグログを表示できます。NODE_DEBUGフラグはNode.jsランタイムによってサポートされており、モジュール名を使用して1つ以上のモジュールのログを表示できます。

例えば、NODE_DEBUG="adonisjs:*"値を使用してすべてのAdonisJSパッケージのログを表示できます。

NODE_DEBUG="adonisjs:*" node ace serve --hmr

同様に、NODE_DEBUG環境変数を使用してfs、net、moduleなどのNode.jsネイティブモジュールからのログを表示できます。

NODE_DEBUG="adonisjs:*,net,fs" node ace serve --hmr

デバッグ

VSCodeデバッガーを使用してデバッグ

テストのデバッグ

他のすべてのAceコマンドのデバッグ

Edgeテンプレートのデバッグ

Dump and Die

Edgeテンプレートのデバッグ用ヘルパー

ダンパー設定

フレームワークのデバッグログ

On this page