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

04/05/2020, by maria

Twigテンプレートエンジンはデバッグツールを提供します。

Drupal 8の実装には、マークアップを出力するテンプレートを見つけるための追加ツールもあります。

警告： Twigデバッグを有効にすると、特にViewsなど、サイトの一部が壊れる可能性があります。この問題を参照してください。

デバッグを有効にする

sites/default/services.ymlでTwigデバッグを有効にします。

デバッグ変数をtrueに設定します。そしてキャッシュをクリアします。

parameters:
  twig.config:
    debug: true

services.ymlがまだ存在しない場合は、default.services.ymlをservices.ymlにコピーします。
Drupalがすでにインストールされている場合、書き込みアクセスを許可するためにsites/defaultディレクトリの権限を一時的に変更する必要があるかもしれません。
ディレクトリの権限を変更する方法
services.ymlを作成して編集したら、sites/defaultディレクトリをロックするために権限を元に戻します。

デバッグを確認する

Firebug（Firefox）を使用している場合は、「Show Comments（コメントを表示）」が有効になっていることを確認するか、ページのソースを直接表示します：

twig-debug

自動再読み込み

パフォーマンス向上のため、Twigテンプレートはディスク上のPHPクラスにコンパイルされますが、これはデフォルトでは変更を加えてもテンプレートが更新されないことを意味します。本番環境では有効にしないでください。

テンプレートを手動で再構築するには、drush crを実行します。開発時間を節約するには、services.ymlでtwig.config.auto_reload: trueを設定して自動再読み込みを有効にします（デフォルトでは、twig.config.debug: trueで自動再読み込みが有効になります）。

詳細については、https://drupal.org/node/1903374を参照してください。

変数の表示

変数の表示を扱う最良の方法はXdebugを使用することです。

以下のXdebug以外の方法を使用すると、役に立たない情報がページに何ページも出力される再帰的レンダリング操作が多くなります。

最も推奨されるアプローチは、PHPstormとXdebugを使用することです。設定が最も簡単だからです。ただし、ほとんどすべてのIDEにXdebug用のプラグインがあります。無料で比較的軽量なエディタが必要な場合は、MicrosoftのVSCodeエディタがオープンソースのオプションで、PHPとXdebug用のプラグインがあります。

Xdebugの設定

Xdebugの設定は複雑な場合があるため、IDEプラグインの手順を読み、接続のためのXdebugドキュメントを確認することを忘れないでください。間違ったタイプの環境を対象にしている場合、インターネットで手順やエラーレポートを単に読んでも役に立ちません（つまり、XdebugがVagrant、Virtualbox、またはDocker内にある場合は、「リモート」接続の手順が必要になる場合があります：https://xdebug.org/docs/remote）。

Drupal.orgはさまざまなエディタ向けのXdebugガイドを提供しています。ここにあります：https://www.drupal.org/docs/develop/development-tools/xdebug-debugger

Xdebugを使用する場合：

IDEが変数やPHP環境の状態に関するその他の情報を表示するために、Twigテンプレートにブレークポイントを設定する方法は3つあります：

PHPStormの新しいTwigデバッグ機能を使用します（ブログ、ドキュメント）。Drupalモジュールは必要ありません。
Develモジュールを使用する

{{ devel_breakpoint() }}

Twig Xdebugモジュールを使用する

{{ breakpoint() }}

Xdebugをインストールできない場合...

...読み続けてください。幸運を祈ります、友よ。

{{ dump() }}

{{ dump(variable_name) }}

使用可能な変数のリスト（トップレベル）：

{{ dump(_context|keys) }}

Devel kintサブモジュールがある場合（インストールにはcomposer require --dev drupal/devel 1.0-alpha1を使用したComposerでのrequire-devと、drush -y en kintを使用したDrushでのインストールが必要）、次のコマンドでTwigで使用できる変数のきれいな表示を取得できます：

{{ kint() }}

レンダリングが非常に大きくなると、kintがブラウザをブロックする可能性が非常に高くなります。その場合、次のモジュールが適している可能性があります：

https://www.drupal.org/project/vardumper

または、twig用のVardumperを含むVardumper Twigモジュールを使用できます。twigで使用できる変数のきれいな表示を取得できます：

{{ dump() }}
{{ dump(variable_name) }}

{{ vardumper() }}
{{ vardumper(variable_name) }}

https://www.drupal.org/project/twig_vardumper

...ただし、Xdebugを動作させるために1〜2時間費やすと、どの変数を使用できるかを知ることができるため、生活がはるかに楽になることも考慮してください。

間違ったパラダイムを使用している場合...

Twigで多くのプログラミングを行う場合は、そのレベルで複雑なことを実際に行う必要があるかどうかを検討する必要があります。たとえば、既存のフィールドフォーマッタプラグインファイルをカスタムモジュールにコピーし（同じパス構造を使用することを忘れないでください）、アノテーション（プラグイン名とも呼ばれる導入コメント）を変更し、PHP/HTMLを調整してそこで目的のことを行う方がよいかどうかを考えてください。Drupal 8のプラグインは、特定のフォルダにある単なる個別のファイルであり、非常に簡単に扱えます。

追加のデバッグオプションは次のセクションにあります。

パレット - カラフルに🎨