console.log()を使うときのおすすめ記述方法

（2015/09/01追記）
TypeScript版を書きました。
TypeScriptでconsole.log()を使うときの便利メソッド

---

ブラウザの開発者ツールのコンソールに、デバッグ用の文字列を出力するconsole.log()という便利なメソッドがあります。しかし、使用時には2点気をつけなければならないことがあります。

console.log()を使う上での2つの問題点

問題1 一部対応していないブラウザがある。
例えばIE6、7、8、9ではconsole.log()は実行されません。

問題2 デバッグ用の出力を消し忘れたまま本番公開してしまう。
デバッグ用の出力はあくまで開発段階で必要なものです。本番サイトにおいてもそれが出力されたままなのは運用上よろしくありません。公開前にすべて非表示にするべきです。とはいえたくさんの箇所にconsole.log()の記述をしていたら、それをすべて消すのは面倒です。

解決案

上記2点の問題を解決する手段として、私はconsole.log()をラップした新しいメソッド「trace()」を作成しています。具体的には以下のようなコードです。

JavaScript

/** デバッグモードかどうか。本番公開時にはfalseにする */
var DEBUG_MODE = true;

/** デバッグモードでConsoleAPIが有効な場合にログを出力する */ 
function trace(s) {
    if (DEBUG_MODE && this.console && typeof console.log != "undefined") {
        console.log(s);
    }
}

開発中、ログの出力が必要な箇所でtrace()を実行します。IE6~9ではエラーは発生しません。（ただし、ログの出力もありません）。本番公開時にはDEBUG_MODEをfalseにするだけで、ログの出力はなくなります。trace()の実行箇所をすべて削除する必要はなく、ログ出力の消し忘れの危険性が減ります。

そもそもDEBUG_MODEをfalseにし忘れる可能性があるならば、例えば以下のようにDEBUG_MODEを本番URLに紐づけてしまうのもよいでしょう。

JavaScript

/** デバッグモードかどうか。本番URLが含まれている場合は自動でfalse */
var DEBUG_MODE = true && window.location.href.indexOf("本番URL") >= 0;

また、GruntやGulpを使って本番公開時にtrace()メソッド自体を削除するという手もあります。しかし、trace()メソッドを残しておくと開発者ツールでDEBUG_MODEをtrueにして、本番サイトでの動作チェックもできるので、個人的には削除はしない派です。