読者です 読者をやめる 読者になる 読者になる

X-ChromeLogger-Dataヘッダを使うとWebブラウザのコンソールにログを出力できる

【スポンサーリンク】

主なWebブラウザにはコンソール機能があるので、JavaScriptconsole.log('Hello, world.'); と書くとコンソールにログを出力することができます。

X-ChromeLogger-Data というHTTPヘッダを使うと、JavaScriptに限らず、サーバサイドのプログラミング言語からFirefoxのコンソールへログを出力することができます。次に示すのはPHPX-ChromeLogger-Dataヘッダを出力する例です。

<?php
$log = array();
$log[] = array(array('Hello, world.'), 'log');

$json = array(
    'columns' => array('log', 'type'),
    'rows' => $log
);
$data = base64_encode(utf8_encode(json_encode($json)));
header('X-ChromeLogger-Data: ' . $data);

FirefoxはこのHTTPヘッダを受け取ると、コンソールへデコードした文字列を出力します。

f:id:hontonodeai:20170109131354p:plain

出力するレベルは上記の例で示した log のほかに、infowarnerror を使うこともできます。

<?php
$log = array();
$log[] = array(array('Hello, world.'), 'log');    // ログレベルを出力
$log[] = array(array('Hello, world.'), 'info');   // メッセージレベルを出力
$log[] = array(array('Hello, world.'), 'warn');   // 警告レベルを出力
$log[] = array(array('Hello, world.'), 'error');  // エラーレベルを出力

なお、FirefoxX-ChromeLogger-Data をデフォルトでサポートしていますが、Chromeの場合はChrome Loggerという拡張機能をインストールする必要があります。

craig.is

Chrome Loggerでは各言語別のロギングライブラリも紹介しており、PHPのライブラリを使うと以下のように簡単に書くことができます。

<?php
include 'ChromePhp.php';
ChromePhp::log('Hello, world.');

X-ChromeLogger-Data はHTTPヘッダなので、XMLJSON、PDFなど、余計な文字列を出力するとフォーマットとして成り立たないデータを表示する場合でも気軽にデバッグに使えそうです。