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

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

 

 

 

 

はじめに

 

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

 

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

 

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

https://www.itsolutionstuff.com/post/how-to-install-php-gd-extension-in-ubuntuexample.html

https://websolutionstuff.com/post/require-ext-curl-is-missing-from-your-system-ubuntu

 

 

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

 

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

{{ breakpoint() }}

 

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

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

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

 

 

 

 

 

 

 

さいごに

 

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

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

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

 

 

 

 

参考

 

 

 

 

 

 

 


この記事に関するご質問やご意見などございましたらお問い合わせフォームからお気軽にご連絡ください。