Ajaxを使った時のデバッグをdumpで行う

PHPやSymfonyを使った開発をする時によく使うvar_dumpやdump関数。
デバッグに使う人も多いと思いますが、今回はAjaxを使った時に
これらの関数を利用する方法をご紹介したいと思います。

Ajaxを使うと非同期で処理が行われるため、
画面上に内容が出力されるわけではありません。
そこで利用するのが、ブラウザ機能のDevToolsや、
Symfony Profilerというフレームワーク用のデバッグツールになります。

確認の仕方は簡単です。

 DevTools (ChromeやEdge Betaなど)

デバッグをしたいページを表示した状態で、
F12キー(Windowsの場合。Macの場合はCommand+Option+Iキー)
を押すと表示されます。

その後、Nerwork > XHRのタグを選択し、
デバッグしたいページを再読み込みします。
そしてAjaxを動かす操作をすると、
ファイル一覧の部分に実行したファイルが表示されますので、
該当のファイルをクリックします。
すると、横のPreviewタブ、Responceタブに
var_dumpした内容が表示されています。

これを使えば、Ajaxでもお手軽にデバッグができますね。

Symfony Profiler

Symfonyを使っていると、dump関数が利用できます。
var_dumpよりもオブジェクトをきれいに表示してくれたり、
リクエストやレスポンスなど、様々な役に立つ情報を
表示してくれる優れものです。

Symfony Profilerを使っても、
Ajax時にdumpした内容を確認することができます。

Symfonyのデバッグモードを有効にした状態で、Ajaxを動かす操作をします。
そうすると、下部ツールバーのリロードマークのようなところに
AjaxリクエストしたURLなどが表示されています。
そこのProfileの項目をクリックすると、そのリクエストの詳細が表示されます。その中で、Debugの項目を見るとdumpした内容を確認することができます。

こちらはdumpした内容だけでなく、
Ajaxで送信したPOSTパラメータなども確認できるので便利です。

ABOUTこの記事をかいた人

フリーランスとして働く、フルスタックエンジニア 初崎 匠のサイト。仕事のことから趣味のアニメーション制作、英語学習など、様々なことを通じて、少しでも多くの人が幸せになれるような価値を提供できるよう挑戦し続けます。