先生と生徒の会話形式で理解しよう

生徒

「Twigテンプレートで思った通りに表示されないとき、どうやって調べたらいいですか？」

先生

「SymfonyにはWeb Profiler Toolbar（ウェブプロファイラーツールバー）という強力な開発ツールが付いているので、それを使えば問題を見つけやすくなりますよ。」

生徒

「それって特別な設定が必要なんですか？パソコンもあまり詳しくないんですが…」

先生

「大丈夫です。Symfonyでは初期設定でこの機能がオンになっているので、すぐに使い始められますよ。Twigのデバッグにも便利なので、一緒に使い方を学んでいきましょう！」

1. Twigのデバッグって何をするの？

Twigのデバッグとは、「テンプレートに何が渡ってきているか」「表示が正しくされているか」を確認する作業のことです。Webサイトを作っていると、「変数が表示されない」「レイアウトが崩れる」といったことがよく起こります。

そういったとき、Symfonyの開発環境ではTwigと一緒に動く便利なツールが用意されています。Twigは、ただのHTMLとは違って、{{ }} や {% %} を使ってプログラム的に表示を切り替えるテンプレートです。だからこそ、表示ミスがあってもすぐには気づけないこともあるのです。

2. SymfonyのWeb Profiler Toolbarとは？

Web Profiler Toolbar（ウェブプロファイラーツールバー）は、Symfonyに最初から付いている開発者用のツールです。Symfonyでページを表示すると、画面の下に黒い帯のようなバーが出てきたことはありませんか？あれがWeb Profiler Toolbarです。

このバーを使うと、次のような情報が簡単にわかります：

つまり、Symfonyアプリケーションの健康診断をしてくれる便利な道具なのです。

SymfonyのWebアプリケーションを開発していて、「dev（開発）モード」でアクセスすると、自動的に画面の下部に表示されます。表示されない場合は、URLの末尾に_profilerが付いていないか確認してみましょう。

例えば、次のようなURLにアクセスして詳細を見ることができます。


http://localhost:8000/_profiler/xxxxxxx

「xxxxxxx」は毎回変わる文字列で、ページごとに一意のIDです。

Twigテンプレートでよくあるのが「変数の中身が見えない」という問題です。そんなときに使うのが、dump関数です。これはTwigで変数の中身を画面に出力するための便利な機能です。


{{ dump(user) }}

上記のように書くと、userという変数の中身がWeb Profiler Toolbarの「Debug」タブに表示されます。

ただし、dumpを使うには、debug拡張が有効になっている必要があります。Symfonyではconfig/packages/dev/twig.yamlで設定されていることが多いです。

たとえば、Twigテンプレートでarticleという記事の情報が渡ってきているとします。その内容を確認したいときは次のようにします。


{{ dump(article) }}

ページの見た目には何も出ないかもしれませんが、Web Profiler Toolbarの「Debug」アイコンをクリックすると、しっかり変数の中身が確認できます。

このとき、HTMLのレイアウトを崩さないので、見た目を壊さずデバッグできます。

Web Profiler Toolbarではなく、画面上に直接中身を出したいときは、次のようにdumpを使って、見やすい場所に配置しましょう。


<pre>{{ dump(article) }}</pre>

この書き方は開発時には便利ですが、本番環境（production）では絶対に使ってはいけません。なぜなら、個人情報や内部の構造が外部に漏れてしまう可能性があるからです。

Twigだけでなく、Symfony全体の開発で使える情報もたくさんあります。以下はよく使う項目です。

これらを活用すれば、表示の不具合や速度の問題も素早く見つけられるようになります。

Symfonyの.envファイルで、開発モード（dev）か本番モード（prod）かを指定できます。TwigのデバッグやWeb Profiler Toolbarは、基本的にAPP_ENV=devのときだけ有効です。


APP_ENV=dev
APP_DEBUG=1

このように設定されていれば、デバッグ機能が使える状態です。