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

はじめに

前回の記事で、デバッグモードを有効にする方法をいくつかお伝えしました。その中で、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

Access to this page has been denied.

www.drupal.org

TWIG_XDEBUGのモジュールのインストールで失敗する場合は、PHP-GDやEXT-CURLがインストールされているか確認してください。

インストールができておらず失敗している場合は、以下の情報を参考にインストールしてください。

How to Install PHP GD Extension in Ubuntu?

how to install php gd extension in ubuntu, ubuntu php install gd extension, install php gd extension ubuntu 20.04, install php gd extension ubuntu, ubuntu insta...

www.itsolutionstuff.com

Require ext-curl is missing from your system ubuntu

require ext-curl * is missing from your system ubuntu, composer require ext-curl, composer install curl error, install curl extension php ubuntu, requires ext-c...

websolutionstuff.com

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

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

{{ breakpoint() }}

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

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

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

さいごに

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

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

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

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

お問い合わせ