こんにちは、中川です。

PHPでの開発中のちょっとしたデバッグに、echo や var_dumpで画面に値を出力して確認することがありますよね。
このデバッグ方法は簡単でいいのですが、出力した配列の値などはパッと見で確認しやすいとは言えませんし、画面の表示内容が崩れたりします。

画面に出力しない方法としては、
error_log関数を使ってapacheログやファイルに出力する方法もありますが、
この場合は、サーバ側にログインしてtailなどでファイル内容を確認する必要がでてきます。

そんなちょっとした問題を解決してくれるツール
「Chrome Logger」をご紹介したいと思います。
Chrome Loggerを使えば、JavaScriptのconsole.logのように、
表示画面には影響を与えないでブラウザのデベロッパコンソールにPHPから値を出力できます。

■Chrome Logger

http://craig.is/writing/chrome-logger

Chrome Loggerは、Chromeのエクステンションとして提供されていますので、
以下のページからインストールを行えます。
https://chrome.google.com/webstore/detail/chrome-logger/noaneddfkdjfnfdakjjmocngnfkfehhd

※なおエクステンションのソースは公開されていますので、
https://github.com/ccampbell/chromelogger
こちらから自分でインストールすることもできるようです。

さて、次はPHP側のライブラリをダウンロードします。
https://github.com/ccampbell/chromephp
こちらの「ChromePhp.php」の1ファイルだけダウンロードしてincludeすれば動作します。

■動作確認

さっそく簡単な例で動作確認してみましょう。

<?php
// demo.php
include 'ChromePhp.php';
ChromePhp::log('Hello console!日本語もOK');
ChromePhp::log($_SERVER); // 配列も大丈夫
ChromePhp::info('infoログです');
ChromePhp::warn('warnログです');
ChromePhp::error('errorログです');
ChromePhp::groupCollapsed('MyGroup');
for ($i = 1; $i <= 10; $i++) {
  ChromePhp::log('log' . $i);
}
ChromePhp::groupEnd();

これで、ブラウザの右上の「Chrome Logger」のアイコンをONにして、
ブラウザでアクセスします。
デベロッパツールのコンソール画面を開いてみると以下のようにログが表示されます！

■仕組み

これは素晴らしいということで、ちょっとどうやって動いてるのか気になり調べてみました。
すると仕組みはすごく簡単で、素晴らしいアイデアです！
PHPからはheader関数を使って、X-ChromeLogger-Dataというヘッダで、json_encode+base64_encode した値を渡しています。
あとは、ChromeエクステンションのJSでデコードしてコンソールに出力するだけですね。簡単！

是非みなさんも試してみてください。