Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
114
Help us understand the problem. What is going on with this article?
@tonkotsuboy_com

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

More than 1 year has passed since last update.

(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にして、本番サイトでの動作チェックもできるので、個人的には削除はしない派です。

114
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tonkotsuboy_com
フロントエンド / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート /お仕事依頼はDMまで
moneyforward
「お金を前へ。人生をもっと前へ。」をMissionとして、個人向け、法人向け様々なFintechサービスを開発、提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
114
Help us understand the problem. What is going on with this article?