web-dev-qa-db-ja.com

コード内のすべてのconsole.logステートメントを迅速かつ便利に無効にする方法

テスト目的で、JavaScriptコード内のすべてのconsole.logステートメントをオフにする方法はありますか?

218
Zack Burt

スクリプトでconsole.log関数を再定義します。

console.log = function() {}

それだけです、コンソールへのメッセージはもうありません。

編集:

Cideのアイデアを拡張します。コードからのログのオン/オフを切り替えるために使用できるカスタムロガー。

Firefoxコンソールから:

var logger = function()
{
    var oldConsoleLog = null;
    var pub = {};

    pub.enableLogger =  function enableLogger() 
                        {
                            if(oldConsoleLog == null)
                                return;

                            window['console']['log'] = oldConsoleLog;
                        };

    pub.disableLogger = function disableLogger()
                        {
                            oldConsoleLog = console.log;
                            window['console']['log'] = function() {};
                        };

    return pub;
}();

$(document).ready(
    function()
    {
        console.log('hello');

        logger.disableLogger();
        console.log('hi', 'hiya');
        console.log('this wont show up in console');

        logger.enableLogger();
        console.log('This will show up!');
    }
 );

上記の「ロガー」の使用方法は?準備完了イベントで、logger.disableLoggerを呼び出して、コンソールメッセージが記録されないようにします。コンソールにメッセージを記録するメソッド内にlogger.enableLoggerとlogger.disableLoggerの呼び出しを追加します。

371
SolutionYogi

以下はより完全です:

var DEBUG = false;
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(){};
    }
}

これにより、コンソール内の一般的なメソッドが存在する場合はゼロになり、エラーなしでパフォーマンスオーバーヘッドなしで呼び出すことができます。 IE6のようなコンソールのないブラウザの場合、エラーを防ぐためにダミーのメソッドが作成されます。もちろん、Firebugには、トレース、プロファイル、時間など、さらに多くの関数があります。コードで使用する場合、それらをリストに追加できます。

また、デバッガにこれらの特別なメソッド(IEなど)があるかどうかを確認し、サポートしていないメソッドをゼロにすることもできます。

if(window.console && !console.dir){
var methods = ["dir", "dirxml", "trace", "profile"]; //etc etc
    for(var i=0;i<methods.length;i++){
        console[methods[i]] = function(){};
    }
}
65
mwilcox

documentation からわかる限り、Firebugはデバッグ状態を切り替える変数を提供しません。代わりに、console.log()を条件付きで呼び出すラッパーでラップします。つまり:

DEBUG = true; // set to false to disable debugging
function debug_log() {
    if ( DEBUG ) {
        console.log.apply(this, arguments);
    }
}

すべての既存の呼び出しを変更する必要がないように、代わりにこれを使用できます:

DEBUG = true; // set to false to disable debugging
old_console_log = console.log;
console.log = function() {
    if ( DEBUG ) {
        old_console_log.apply(this, arguments);
    }
}
25
Cide

貴方はするべきではない!

組み込み関数を上書きすることはお勧めできません。また、すべての出力を抑制する保証もありません。使用する他のライブラリが変更を元に戻す可能性があり、コンソールに書き込む可能性のある他の関数があります。 .dir().warning().error().debug().assert()など.

一部の人が示唆したように、DEBUG_MODE変数を定義し、条件付きでログを記録できます。コードの複雑さと性質によっては、コンソールオブジェクトをラップし、この機能が組み込まれている独自のロガーオブジェクト/関数を作成することをお勧めします。 instrumentationを処理するのに適切な場所です。

つまり、「テスト」の目的で、コンソールに出力する代わりにtestsと書くことができます。テストを行っておらず、それらのconsole.log()行がコードの作成を支援するだけの場合は、単に削除するです。

13
istepaniuk

Console.logを無効にする方法を尋ねたのは知っていますが、これはあなたが本当に望んでいることです。この方法では、コンソールを明示的に有効または無効にする必要はありません。単に開いたりインストールしたりしていない人にとっては、厄介なコンソールエラーを防ぐだけです。

if(typeof(console) === 'undefined') {
    var console = {};
    console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
}
12

これは古い投稿であるが、Googleの検索結果の上部に表示されるため、最新のChrome、FF、およびIEで動作する、よりエレガントな非jQueryソリューションを次に示します。

(function (original) {
    console.enableLogging = function () {
        console.log = original;
    };
    console.disableLogging = function () {
        console.log = function () {};
    };
})(console.log);
12
Joey Schooley

フラグDEBUGを変更して、console.log関数をオーバーライドします。これでうまくいくはずです。

var DEBUG = false;
// ENABLE/DISABLE Console Logs
if(!DEBUG){
  console.log = function() {}
}
10
Swanidhi

これらすべての答えの中で、だれも組み合わせないことに驚いています。

  • Jqueryなし
  • グローバル名前空間を汚染しない匿名関数
  • Window.consoleが定義されていない場合の処理
  • コンソールの.log関数を変更するだけです

私はこれに行きたい:

(function () {

    var debug = false

    if (debug === false) {
        if ( typeof(window.console) === 'undefined') { window.console = {}; }
        window.console.log = function () {};
    }
})()
9
Xavier13

IE7を使用している場合、コンソールは定義されません。したがって、よりIEフレンドリーなバージョンは次のようになります。

if (typeof console == "undefined" || typeof console.log == "undefined") 
{
   var console = { log: function() {} }; 
}
8
Chris S

この問題も検索して、私のCordovaアプリで試した後、Windows Phoneのすべての開発者に上書きしないように警告したいだけです。

    console.log

起動時にアプリがクラッシュするためです。

運が良ければローカルで開発している場合はクラッシュしませんが、ストアに送信するとアプリがクラッシュします。

上書きするだけ

    window.console.log 

もしあなたが必要ならば。

これは私のアプリで動作します:

   try {
        if (typeof(window.console) != "undefined") {
            window.console = {};
            window.console.log = function () {
            };
            window.console.info = function () {
            };
            window.console.warn = function () {
            };
            window.console.error = function () {
            };
        }

        if (typeof(alert) !== "undefined") {
            alert = function ()
            {

            }
        }

    } catch (ex) {

    }
7
graphefruit

これは、SolutionYogiChris S。からの回答のハイブリッドです。 console.logの行番号とファイル名。 jsFiddleの例

// Avoid global functions via a self calling anonymous one (uses jQuery)
(function(MYAPP, $, undefined) {
    // Prevent errors in browsers without console.log
    if (!window.console) window.console = {};
    if (!window.console.log) window.console.log = function(){};

    //Private var
    var console_log = console.log;  

    //Public methods
    MYAPP.enableLog = function enableLogger() { console.log = console_log; };   
    MYAPP.disableLog = function disableLogger() { console.log = function() {}; };

}(window.MYAPP = window.MYAPP || {}, jQuery));


// Example Usage:
$(function() {    
    MYAPP.disableLog();    
    console.log('this should not show');

    MYAPP.enableLog();
    console.log('This will show');
});
5
Justin

Gruntを使用する場合、console.logステートメントを削除/コメントするためにタスクを追加できます。したがって、console.logはもう呼び出されません。

https://www.npmjs.org/package/grunt-remove-logging-calls

3
jdborowy

私は彼の問題に対処するために以下を使用しています:-

var debug = 1;
var logger = function(a,b){ if ( debug == 1 ) console.log(a, b || "");};

デバッグを有効にするには、デバッグを1に設定します。次に、デバッグテキストを出力するときにロガー機能を使用します。また、2つのパラメーターを受け入れるように設定されています。

だから、代わりに

console.log("my","log");

つかいます

logger("my","log");

このユースケース用のライブラリを開発しました: https://github.com/sunnykgupta/jsLogger

機能:

  1. Console.logを安全に上書きします。
  2. コンソールが使用できない場合は注意してください(そうです、それも考慮に入れる必要があります)。
  3. 後で取得するために、すべてのログを(抑制されていても)保存します。
  4. logwarnerrorinfoなどの主要なコンソール関数を処理します。

変更のために開いており、新しい提案が来るたびに更新されます。

2
Sunny R Gupta

警告:恥知らずなプラグイン!

また、JsTraceオブジェクトのようなものを使用して、モジュールレベルの「切り替え」機能を備えたモジュラートレースを使用して、その時点で表示したいものだけをオンにすることもできます。

http://jstrace.codeplex.com

(気にする人のために、NuGetパッケージもあります)

すべてのレベルはデフォルトで「エラー」になっていますが、「オフ」にすることもできます。ただし、エラーが表示されない理由を考えることはできません

次のように変更できます。

Trace.traceLevel('ModuleName1', Trace.Levels.log);
Trace.traceLevel('ModuleName2', Trace.Levels.info);

その他のドキュメントについては、 ドキュメント をご覧ください

T

2
Tom McKearney

これは、window.consoleのすべてのメソッドをオーバーライドする必要があります。スクリプトセクションの最上部に配置できます。PHPフレームワークを使用している場合は、アプリ環境が運用中の場合、または何らかのデバッグフラグが無効な場合にのみこのコードを印刷できます。次に、開発環境またはデバッグモードで動作するコード内のすべてのログを保持します。

window.console = (function(originalConsole){
    var api = {};
    var props = Object.keys(originalConsole);
    for (var i=0; i<props.length; i++) {
        api[props[i]] = function(){};
    }
    return api;
})(window.console);
2
agm-dev

以前に winston loggerを使用しました。

今日、私は以下の経験からよりシンプルなコードを使用しています:

  1. Cmd /コマンドラインから環境変数を設定します(Windowsの場合):

    cmd
    setx LOG_LEVEL info
    

または、必要に応じてコードに変数を含めることもできますが、上記の方が優れています。

  1. Cmd /コマンドライン、またはNetbeansなどのIDE /エディターを再起動します

  2. 以下のようなコードがあります:

    console.debug = console.log;   // define debug function
    console.silly = console.log;   // define silly function
    
    switch (process.env.LOG_LEVEL) {
        case 'debug':
        case 'silly':
            // print everything
            break;
    
        case 'dir':
        case 'log':
            console.debug = function () {};
            console.silly = function () {};
            break;
    
        case 'info':
            console.debug = function () {};
            console.silly = function () {};
            console.dir = function () {};
            console.log = function () {};
            break;
    
        case 'trace':   // similar to error, both may print stack trace/ frames
        case 'warn':    // since warn() function is an alias for error()
        case 'error':
            console.debug = function () {};
            console.silly = function () {};
            console.dir = function () {};
            console.log = function () {};
            console.info = function () {};
            break;
    }
    
  3. 次のように、すべてのconsole。*を使用します。

    console.error(' this is a error message '); // will print
    console.warn(' this is a warn message '); // will print
    console.trace(' this is a trace message '); // will print
    console.info(' this is a info message '); // will print, LOG_LEVEL is set to this
    
    console.log(' this is a log message '); // will NOT print
    console.dir(' this is a dir message '); // will NOT print
    console.silly(' this is a silly message '); // will NOT print
    console.debug(' this is a debug message '); // will NOT print
    

ここで、ポイント1で行ったLOG_LEVEL設定(setx LOG_LEVEL logやコマンドラインの再起動など)に基づいて、上記の一部が印刷され、他の一部は印刷されません

お役に立てば幸いです。

このURLでもう少し高度なコードを見つけました JavaScriptのヒント:console.logを無効にして無効にします

var DEBUG_MODE = true; // Set this value to false for production

if(typeof(console) === 'undefined') {
   console = {}
}

if(!DEBUG_MODE || typeof(console.log) === 'undefined') {
   // FYI: Firebug might get cranky...
   console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time =    console.timeEnd = console.assert = console.profile = function() {};
}
2
kikeenrique

私はこれを書いた:

//Make a copy of the old console.
var oldConsole = Object.assign({}, console);

//This function redefine the caller with the original one. (well, at least i expect this to work in chrome, not tested in others)
function setEnabled(bool) {
    if (bool) {
        //Rewrites the disable function with the original one.
        console[this.name] = oldConsole[this.name];
        //Make sure the setEnable will be callable from original one.
        console[this.name].setEnabled = setEnabled;
    } else {
        //Rewrites the original.
        var fn = function () {/*function disabled, to enable call console.fn.setEnabled(true)*/};
        //Defines the name, to remember.
        Object.defineProperty(fn, "name", {value: this.name});
        //replace the original with the empty one.
        console[this.name] = fn;
        //set the enable function
        console[this.name].setEnabled = setEnabled

    }
}

残念ながら、厳密モードの使用では機能しません。

したがって、console.fn.setEnabled = setEnabledを使用してから、console.fn.setEnabled(false)を使用します。ここで、fnは、ほぼすべてのコンソール関数です。あなたの場合は次のようになります:

console.log.setEnabled = setEnabled;
console.log.setEnabled(false);

私もこれを書いた:

var FLAGS = {};
    FLAGS.DEBUG = true;
    FLAGS.INFO = false;
    FLAGS.LOG = false;
    //Adding dir, table, or other would put the setEnabled on the respective console functions.

function makeThemSwitchable(opt) {
    var keysArr = Object.keys(opt);
    //its better use this type of for.
    for (var x = 0; x < keysArr.length; x++) {
        var key = keysArr[x];
        var lowerKey = key.toLowerCase();
        //Only if the key exists
        if (console[lowerKey]) {
            //define the function
            console[lowerKey].setEnabled = setEnabled;
            //Make it enabled/disabled by key.
            console[lowerKey].setEnabled(opt[key]);
        }
    }
}
//Put the set enabled function on the original console using the defined flags and set them.
makeThemSwitchable(FLAGS);

したがって、FLAGS.LOG = falseのようなデフォルト値をFLAGSに入れるだけで(上記のコードを実行する前に)、ログ関数はデフォルトで無効になりますが、それでもconsole.log.setEnabled(true)を呼び出して有効にできます。

すべてのconsole.*関数を無効化/オーバーライドする包括的なソリューションは、 here です。

もちろん、必要なコンテキストを確認した後、必ず含めてください。たとえば、本番リリースにのみ含めると、他の重要なコンポーネントを爆撃することはありません。

ここで引用:

"use strict";
(() => {
  var console = (window.console = window.console || {});
  [
    "assert", "clear", "count", "debug", "dir", "dirxml",
    "error", "exception", "group", "groupCollapsed", "groupEnd",
    "info", "log", "markTimeline", "profile", "profileEnd", "table",
    "time", "timeEnd", "timeStamp", "trace", "warn"
  ].forEach(method => {
    console[method] = () => {};
  });
  console.log("This message shouldn't be visible in console log");
})();
1
kmonsoor

Gulpを使用している場合は、 this pluginを使用できます。

次のコマンドでこのプラグインをインストールします。

npm install gulp-remove-logging

次に、gulpfileに次の行を追加します。

var gulp_remove_logging = require("gulp-remove-logging");

最後に、gulpfileに構成設定(以下を参照)を追加します。

タスク設定

gulp.task("remove_logging", function() {
     return gulp.src("src/javascripts/**/*.js")
    .pipe(
      gulp_remove_logging()
    )
    .pipe(
      gulp.dest(
        "build/javascripts/"
      )
    ); });
1
Andrew Nessin

Javascript AOP(たとえば jquery-aop )を使用してconsole.debug/logへのすべての呼び出しをインターセプトし(周囲)、グローバル変数がfalseに設定されている場合は実際の呼び出しを続行しません。

Ajax呼び出し(今も)を実行することもできます。そのため、サーバーでログの有効化/無効化の動作を変更できます。

0
Stijn Geukens

https://stackoverflow.com/a/46189791/871166 の簡略化

switch (process.env.LOG_LEVEL) {
  case 'ERROR':
    console.warn = function() {};
  case 'WARN':
    console.info = function() {};
  case 'INFO':
    console.log = function() {};
  case 'LOG':
    console.debug = function() {};
    console.dir = function() {};
}

0
7ynk3r

logeek を使用できます。ログメッセージの可視性を制御できます。その方法は次のとおりです。

<script src="bower_components/dist/logeek.js"></script>

logeek.show('security');

logeek('some message').at('copy');       //this won't be logged
logeek('other message').at('secturity'); //this would be logged

logeek.show('nothing')を使用して、すべてのログメッセージを完全に無効にすることもできます。

0
Iman Mohamadi