こんにちは。スタジオ・ウミの大野です。

Drupal 8 の少し古めのベータ版で当サイトを構築していたのですが、先日正式版がリリースされたことを受け、移行作業をしました。α版じゃなくてβ版だから、そんなに API は変わらんだろうとたかをくくっていたのですが、蓋を開けてみれば Taxonomy やらテンプレートやら結構仕様が変わっていて一筋縄ではいかず、一から 8.0.0 のサイトを作ってインポートし直すみたいな無駄な作業をしていました……。

さて、そんな愚痴はさておき、今回は Drupal 8 で採用された Twig テンプレートのデバッグ方法について紹介します。

本稿の内容は Drupal.org に投稿されいてる Debugging Twig templates をベースに日本語に意訳して加筆したものです。正確なニュアンスや意味が知りたい方は原文をご覧ください。


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

Drupal 8 ではテンプレート内にマークアップを出力する機能が実装されています。

デバッグの有効化

sites/default/services.yml の Twig デバッグ機能を有効にしてください。もし、services.yml が無い場合は default.services.ymlservices.yml にリネームもしくはコピーします。

debug 変数を true にセットします。

parameters:
  twig.config:
    debug: true

Firefox の Firebug をお使いであれば「コメントを表示」を有効にしてください。

Firebug のコメントを表示する方法

コンパイル済みの Twig テンプレートの自動更新

Twig テンプレートはパフォーマンス向上のために PHP のクラスにコンパイルされてディスク上にあります。しかし、これはテンプレートファイルに変更を加えてもサイト上のコードが更新されないことを意味します。Twig テンプレートの自動更新を有効するには services.ymldebug を有効にします。詳細については Debugging compiled Twig Templates を参照してください。(すみません、後日訳します!)

変数の表示

{{ dump() }}
{{ dump(var) }}

Devel モジュールの kint サブモジュールがインストールされていれば、変数をアコーディオン形式で表示することができます。

{{ kint() }}

Drupal 8 では Drupal 7 の Devel モジュールに内包されていたいた krumo (変数をアコーディオン状態で表示してくれるもの) が kint に置き換わりサブモジュールとなりました。今までと同様の感覚で dpm() を使う場合は Kint モジュールを有効化する必要があると言うことを意識しなければなりませんね。

原文が細切れに投稿されているので中途半端な感じになっちゃいましたが、次回は Debugging compiled Twig templates の記事を翻訳してみたいと思います。


共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート&フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎!ぜひお気軽にご連絡ください。