WordPressデバッグ向け!PHPのvar_dumpを綺麗に表示する方法まとめ

PHP開発をしていてバグがあった時に変数の中身を確認したいなんて時があります。

そんなときは、var_dump関数を用いて、変数の構造化した情報を見ることで理解しやすかったりすることがあります。

けれど、Wordpressテーマなどを編集していて、HTML上にvar_dumpで出力した時には、ブラウザ上で以下のように表示されてしまい、何だか見づらいなんてこともあるかと思います。

array(2) { [“vegetable”]=> array(3) { [“carrot”]=> string(12) “にんじん” [“tomato”]=> string(9) “トマト” [“onion”]=> string(12) “たまねぎ” } [“fruit”]=> array(3) { [“apple”]=> string(9) “りんご” [“orange”]=> string(12) “オレンジ” [“grape”]=> string(9) “ぶどう” } }

デバッグ用の出力は、なるべく見やすく表示できた方が効率が上がるのは間違いないので、以下では「Wordpress開発向け、var_dumpの表示コード例」をSublime Textのスニペットともにまとめてみたいと思います。

ちなみに、Sublime Textのスニペットの登録方法は以下を参照してください。

Sublime Textのスニペットを登録する方法の紹介です。 Sublime Textでは、よく利用するようなスニペットは、...
スポンサーリンク
レクタングル(大)広告

preタグで囲んで出力

HTMLに出力する場合でもpreタグで囲むと改行が生かされて表示されます。

テンプレートファイルの<?php  ?>内で出力する

WordPressのテンプレートファイルの<?php  ?>の中で利用する場合は、以下のように記述します。

$foods = array("vegetable" => array("carrot" => "にんじん","tomato" => "トマト","onion" => "たまねぎ"),"fruit" => array("apple" => "りんご","orange" => "オレンジ","grape" => "ぶどう"));

//preで囲んで出力
echo('<pre>');
var_dump($foods);
echo('</pre>');

すると、以下のように出力されます。

preで囲んだvar_dumpの出力

この出力だと、デバッグ作業も捗ります。

一応、Sublime Textで、素早く利用できるように、スニペットコードも載せておきます。

<snippet>
  <content><![CDATA[
echo('<pre>');
var_dump(${1});
echo('</pre>');
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>pre_var_dump</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>source.php</scope>
</snippet>

トリガーが「pre_var_dump」となっているので、長すぎたり使いづらい場合は「pvd」とかにするなり利用スタイルに合わせて変更してください。

スニペットを保存するファイルの拡張子は「.sublime-snippet」にする必要があります。設定を保存する場所は、Sublime Textの設定ファイルがあるフォルダの「Packages」より下であればどこに保存してもOKです。

テンプレートファイルの<?php  ?>外で出力する

<?php  ?>の外で利用する場合は、以下のようになります。

<?php
$foods = array("vegetable" => array("carrot" => "にんじん","tomato" => "トマト","onion" => "たまねぎ"),"fruit" => array("apple" => "りんご","orange" => "オレンジ","grape" => "ぶどう"));

//preで囲んで出力
echo('<pre>');
var_dump($foods);
echo('</pre>');
 ?>

単に、<?php  ?>と書いた後で前項で紹介したコードを入力すれば良いだけなのですが、2度手間になります。

なので、スニペットから1発で記述できるSublime Textスニペットコードを以下に載せておきます。

<snippet>
  <content><![CDATA[
<?php
echo('<pre>');
var_dump(${1});
echo('</pre>');
?>
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>pre_var_dump_in_php</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>text.html</scope>
</snippet>

トリガーが「pre_var_dump_in_php」となっているので、長すぎたり使いづらい場合は「pvdip」とかにするなり利用スタイルに合わせて変更してください。

headerで出力する

functions.phpなどの関数内で、実際の出力の前だったりすると、var_dumpで出力しても、表示されないこともあります。

そういった場合は、header関数を用いて、生の HTTP ヘッダを送信してテキスト表示すると、ちゃんと表示されるとともに見やすくなります。

$foods = array("vegetable" => array("carrot" => "にんじん","tomato" => "トマト","onion" => "たまねぎ"),"fruit" => array("apple" => "りんご","orange" => "オレンジ","grape" => "ぶどう"));

//生のヘッダーに出力
header('Content-Type: text/plain; charset=utf-8');
var_dump($foods);

以下のように、ブラウザ上にテキストとして表示されるので見やすいです。

生のヘッダーとして出力

Sublime Textのスニペット登録は以下のようになります。

<snippet>
  <content><![CDATA[
header('Content-Type: text/plain; charset=utf-8');
var_dump(${1});
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>header_var_dump</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>source.php</scope>
</snippet>

トリガーが「header_var_dump」となっているので、長すぎたり使いづらい場合は「hvd」とかにするなり利用スタイルに合わせて変更してください。

まとめ

とりあえず、Wordpressテーマ開発とかなら、これだけで不便していない感じです。

その他にも、ログとしてファイルに出力するとか、デバッグ用のライブラリを試用するなんて方法もあるのですが、よほどのことをしない限りは、上記のもので十分かなと思います。