Firebugなしでconsole is not definedを回避するデバッグ方法

Firebugconsole.log() って JavaScript のデバッグ時にはすごく威力を発揮するのですが、Firebug を閉じている時や他のブラウザをチェックする段になると console is undefined のエラーが出て、鬱陶しいですよネ?

次の様にすれば回避できますが、全ての箇所に if (...) を付けるのもイマイチです。

if (typeof window.console != 'undefined') {
	console.log(a);
	console.trace(b);
	...
}

ということで、つまらない Tips を2つほど。

1.Firebug lite をインクルードする

Firebug lite は IE6+、Firefox、Opera、Safari、Chrome で Firebug の簡易版を使えるようにするためのものです。クロス・ブラウザのレイアウトを確認するのに使っている人も多いでしょう。現在の最新版 1.3.1 では JavaScript のデバッガーまでは使えませんが、console は使えます。

予めデバッグするスクリプトに

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

を仕込んでおけば OK です。ウィンドーの右下に Firebugボタン が表示されるので、クリックすれば Firebug lite が開きます。

console 関数群の出力を抑制するにはこれで良いのですが、特にページを開くと同時に走り始めるスクリプトのデバッグ出力を確認したい場合は、次の様に URL フラグメントでオプションを指定しないとうまくいきません。

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js#startOpened=true,enablePersistent=true"></script>

あるいは次の様に JSON オブジェクトを埋め込みます。

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js">
{ startOpened: true, enablePersistent: true }
</script>

2011年5月5日 追記

あらかじめデバッグ用のオプションが設定されている Debug Channel をインクルードする手もありました。

<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>

2.ダミーのconsole関数群を準備する

firebugx.js をスクリプトに埋め込みましょう。

if (typeof window.console == 'undefined' || typeof console.firebug == 'undefined') {
	var names = [ "log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
	"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

	window.console = {};
	for (var i = 0; i < names.length; ++i)
		window.console[names[i]] = function () {}
}

console があれば (即ち Firebug を開いていれば) 何もしませんし、なければ何もしない console 関数群を作ってくれます。

最新版では2次元配列をテーブルで表示してくれる console.table() という関数も追加されたので、table も追加すると良いでしょう 😀 。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

海外からの投稿は受け付けていません