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

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

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

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

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

このページの目次

console.logをリリース時に無効化する手順
- １．デバッグ/リリースを定数として宣言する
- ２．リリース時のみconsole.logを無効化する
リリース時でもconsoleのコードは確認できるので注意！

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

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

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

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

/// グローバル定数を定義する関数
function define(name, value){
  Object.defineProperty(window, name, { 
   get: function(){return value;},
   set: function(){throw(name+' is already defined !!');},
  });
}

/// デバッグかを表すグローバル定数定義
if(/* リリース環境の条件*/){
  define('DEBUG', false);
}
else if(/*デバッグ環境の条件*/){
  define('DEBUG', true);
}

/// グローバル定数を定義する関数

function define(name, value){

Object.defineProperty(window, name, {

get: function(){return value;},

set: function(){throw(name+' is already defined !!');},

});

}

/// デバッグかを表すグローバル定数定義

if(/* リリース環境の条件*/){

define('DEBUG', false);

}

else if(/*デバッグ環境の条件*/){

define('DEBUG', true);

}

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

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

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

PisukeCode - Web開発まとめ

JavaScripのグローバル定数の正しい作り方...PHPのdefine的実装

https://pisuke-code.com/js-way-to-create-global-constant

JavaScriptで定数を作るには・・・const HOGE = 123456;const FUGA = 'ABCDEF';みたいに const を使うのが一般的だと思います。でもあるとき、この方法だと期待通りの動作にならないことがありました。というか定数定義なら、もっと確実な方法があったんです。そこで自分への忘備録もかね、ここでは JavaScriptでグローバル定数を定義する正しい方法を解説！！ちょうどPHPにおける define関数みたいな実装方法です。const による定数定義が上手くいかない場面まず const がグローバルな定数定義に向いていない理由につい...

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

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

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

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

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

/// リリース時にconsole無効化
if(!DEBUG){
  if(!window.console){
    window.console = {};
  }
  var methods = [
    "log", "debug", "warn", "info"
  ];
  for(var i=0; i<methods.length; i++){
    console[methods[i]] = function(){};
  }
}