【Drupal】Twigテンプレートをデバッグする

こちらのサイトではDRUPAL10に関連する記事を掲載しています。

はじめに

前回の記事で、デバッグモードを有効にする方法をいくつかお伝えしました。その中で、Twigテンプレートについても触れましたが、あくまで使用しているテンプレートや変数等の内容の表示をするのみでした。

今回はPHPコード同様に、Twigテンプレートに埋め込んだロジックを今回はPHPSTORMなどのIDEでデバッグする方法について記事にしました。

前提条件、環境情報

  • xdebugを使用してPHPのデバッグができること
  • Composer が使用可能であること
  • Drushが使用可能であること
  • 仮想環境:landoがインストールされていること

手順

■twigのデバッグを有効化する。

  1. 以下のファイルを編集する
    /sites/development.services.yml
  2. 以下の設定を追加する。※本番環境では有効にしないこと
	parameters:
	  twig.config:
	    debug: true 
	    auto_reload: true

■twig_xdebugのインストール & 有効化する

  1. ターミナルでDrupal Rootに移動する。
  2. 以下のComposerコマンドでtwig_xdebugをインストールする。
    • 開発にしか使われないモジュールなので--devオプションをつけている。
    composer require --dev drupal/twig_xdebug
  3. 以下のコマンドで、twig_xdebugを有効化する。 lando drush en -y twig_xdebug
  4. Drupalのキャッシュをリビルドする。 drush cr
Twig Xdebug
This module enables you to use Xdebug breakpoints with Twig templates. You'll be able to inspect available variables and Twig system info. This module uses the ...

■「{{ breakpoint() }}」をtwigファイルに書いてxdebugでデバッグする。

  1. デバッグしたいTwigに以下のコードを記述する。
{{ breakpoint() }}

この例では、デバッグ対象のテンプレートのコードの先頭に記載しました

デバッグを開始すると、対象のテンプレートをコンパイルされたファイルを一行ごとにステップ実行できるようになります。

コンパイルされたファイルには、コメントでテンプレートファイルの行数が表示されているため、必要に応じてテンプレートファイルを参照しながらデバッグできます。

さいごに

如何だったでしょうか。Twigテンプレートファイルをデバッグできるようになると、便利です。

これまでちまちまと変数を表示しながらしていたテンプレートのデバッグやカスタマイズ作業が、XDEBUGとこのモジュールを利用するれば、その作業にかかる時間を大幅に短縮することができます。

あなたの環境にもぜひインストールして活用してみてください。

このサイトに関するご意見・ご質問はこちらまで

この記事またはDrupalに関するご質問がございましたら、お気軽にお問い合わせください。

タイトルとURLをコピーしました