JavaScriptのconsole.logなどをリリース時に全無効化する

こういう場面って以外に多いかも

  • console.logでデバッグ出力
  • デバッグ環境では普通に表示
  • リリース時には表示無効化したい

デバッグ環境だけで表示してほしいです。

そこで自分の記憶の整理も兼ね、
JSでのconsole.logのリリース時無効化についてまとめ

console.logをリリース時に無効化する手順

自分がよくやってるのが次の手順

1.デバッグ/リリースを定数として宣言する

まず次のようなグローバル定数を作成

このように DEBUG  という定数を作り、リリース環境なら false  、デバッグ環境なら true  になるようなグローバル定数を作ればOKです。環境の判定条件としてドメインとかそいうのを使うのがいいかも

ちなみに上コードでは define(name, value)  という関数を用意し、ちょうどPHPでのdefine的なコードが書けるようにしてます。

もし意味が分からないなら次記事を見てください。

もちろん const DEBUG = true;  みたいな書き方もできます。でもスコープ内でしか有効にならなず、環境に応じて切り替えもできないので不便すぎます。

だから上記事で紹介したみたいに define('DEBUG', true)  みたいなグローバル定数宣言できる関数を用意する必要があるんですね。

2.リリース時のみconsole.logを無効化する

そしてここからが肝心なところ

実際に次コードでリリース時に無効化します。

やってることは単純です。

まず window.console = {};  でconsoleに空オブジェクトを代入。そのあと各種デバッグ関数(console.logとかconsole.debugとか)を念のために空にしてるだけ。

先ほど書いたように DEBUG はデバッグ環境でのみ true  になるため、リリース環境で console.log や console.debug を非表示(正確には無効化)にできます。

ちなみに console.error もコンソール表示されますが、これはリリース時だからといって非表示にするのはどうかと思います。そのため、console.error だけは無効化から除外しました。

リリース時でもconsoleのコードは確認できるので注意!

この方法ですが、注意点があります。

  • コンソールに表示されないだけ
  • console.logのコード自体は残る

リリース時にもコードは見れることに要注意!!

まあNode.jsとかサーバー側で動くものはともかく、JSコードは原則公開状態です。リリース時に無効化したといっても、コードからも簡単に確認できますね。

コードの console.log とかまで隠したいなら、Obfuscator などの難読化ツールを使えばOKです。ちょうど次記事でも紹介したりしました。

このツールは本当に便利なので重宝してます。

もしサーバー側に置くようなコードでもないけど隠したい、あるいはサーバー側に置くのが難しい・・・などの事情があるなら使ってみてください。めちゃくちゃ便利

以上、JSでのconsole.logの無効化でした。

もし間違いがあればコメント欄からどうで。ではまた

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください