debug用に console.log() を良く使うのだが、画面に表示させてみたい事もある。

以下の様に dbg のチェックボックスを ON にすると、ログが表示される。

前回までの記事
[Mithril.js 試してみた(1) todo アプリを作り始める所まで - Qiita]
(http://qiita.com/LightSpeedC/items/a2c967928f9cc13e0ebc)
[Mithril.js 試してみた(2) サーバーからデータを取得する m.request() - Qiita]
(http://qiita.com/LightSpeedC/items/f533f048e01ac19a06ec)
Mithril.js 試してみた(3) console.logの様に画面に表示してみる - Qiita ⇒ この記事
[Mithril.js 試してみた(4) todo アプリのフロント側まで - Qiita]
(http://qiita.com/LightSpeedC/items/c3026847dc5809d2a7a9)
[Mithril.js 試してみた(5) Excelの様な表計算アプリを3時間で作る m.component() - Qiita]
(http://qiita.com/LightSpeedC/items/c19677822f896adc43d9)

デバッグ用ログ表示のサンプルです。

debug.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>debug - Mithril.js</title>

<script src="mithril.min.js"></script>
<!--[if IE]><script src="es5-shim.min.js"></script><![endif]-->

<body>
<div id="$debugElement"></div>
</body>

<script>

(function () {
	'use strict';

	function logger() {
		var style = this !== window && this || {};
		logger.list.push([{key: ++logger.key, style: style}, [].slice.call(arguments).join(' ')]);
		while (logger.list.length > logger.limit)
			logger.list.shift();
	}
	logger.key   = 0;
	logger.log   = function () {
		return logger.apply({color: 'blue'},
		['log:  '].concat([].slice.call(arguments))); };
	logger.info  = function () {
		return logger.apply({color: 'green'},
		['info: '].concat([].slice.call(arguments))); };
	logger.warn  = function () {
		return logger.apply({color: 'orange'},
		['warn: '].concat([].slice.call(arguments))); };
	logger.error = function () {
		return logger.apply({color: 'red'},
		['error:'].concat([].slice.call(arguments))); };
	logger.debug = function () {
		return logger.apply({color: 'purple'},
		['debug:'].concat([].slice.call(arguments))); };
	logger.list  = [];
	logger.limit = 20;            // 表示数の制限
	logger.flag  = m.prop(false); // DEBUGフラグ

	var count = 0;
	setInterval(function () {
		logger('       count:', ++count);
		if (Math.random() > 0.5) logger.log('count:', ++count);
		if (Math.random() > 0.5) logger.info('count:', ++count);
		if (Math.random() > 0.5) logger.warn('count:', ++count);
		if (Math.random() > 0.5) logger.debug('count:', ++count);
		if (Math.random() > 0.5) logger.error('count:', ++count);
		m.redraw(true);
	}, 1000);

	// コンポーネント定義
	var debugComponent = {
		// コントローラ
		controller: function () {

			function minus() {
				logger.limit -= (logger.limit > 10 ? 10 : 0);
			}

			function plus() {
				logger.limit += 10;
			}

			// ビュー
			this.view = function view(ctrl) {
				return [
					m('input[type=checkbox]', m_on('click', 'checked', logger.flag)), 'dbg',
					// DEBUG表示
					!logger.flag() ? [] : [
						' limit: ' + logger.limit + ' ',
						m('button[type=button]', {onclick: minus}, '-'),
						m('button[type=button]', {onclick: plus}, '+'),
						m('pre', {style:{backgroundColor:'lightgray'}},
							logger.list.map(function (e) { return m('div', e[0], e[1]); })
						)
					]
				];
			};
		},
		// ビュー
		view: function (ctrl) { return ctrl.view(ctrl); }
	};

	// HTML要素のイベントと値にプロパティを接続するユーティリティ
	function m_on(eventName, propName, propFunc, attrs) {
		attrs = attrs || {};
		attrs['on' + eventName] = m.withAttr(propName, propFunc);
		attrs[propName] = propFunc();
		return attrs;
	}

	//HTML要素にコンポーネントをマウント
	m.mount($debugElement, debugComponent);

})();

</script>

使い方次第だけど便利だよ。