javascript - Javascript-console.logをオーバーライドし、古い関数を保持します

Question

console.logをオーバーライドして、新しい関数で呼び出したいと思います。

私はこのようなことを試みますが、私は得ますUncaught TypeError: Illegal invocation：

console.log = function() {
  this.apply(window, arguments);
}.bind(console.log);

console.log('as');

これが私の目標です。

console.error(exception);すべきこと：

console.error = function() {
  if (typeof exception.stack !== 'undefined') {
    console.error(exception.stack);
  } else {
    console.error.apply(windows, arguments);
  }
}.bind(console.error);

console.error('as');
console.error({stack: 'my stack....'});

編集：実際には、ChromeではなくFirefoxで動作します... Chrome のバグです：https ：//code.google.com/p/chromium/issues/detail？id = 167911

score 8 · Accepted Answer

あなたはそのようなものを持つことができます：

console.error = (function() {
    var error = console.error;

    return function(exception) {
        if (typeof exception.stack !== 'undefined') {
            error.call(console, exception.stack);
        } else {
            error.apply(console, arguments);
        }
    }
})();

score 7 · Accepted Answer

あなたが望むものを達成するための最良の方法：

// define a new console
var console=(function(oldCons){
    return {
        log: function(text){
            oldCons.log(text);
            // Your code
        },
        info: function (text) {
            oldCons.info(text);
            // Your code
        },
        warn: function (text) {
            oldCons.warn(text);
            // Your code
        },
        error: function (text) {
            oldCons.error(text);
            // Your code
        }
    };
}(window.console));

//Then redefine the old console
window.console = console;

score 2 · Accepted Answer

@Ludovic Feltzの回答に感謝し、インスピレーションを得て、カスタムスタイルのコンソールのカプセル化された代替品を見つけました。

この回答は元の質問とあまり関係がありませんでしたが、Ludovicが上記のコメントで示唆したように、好みのスタイルでコンソールをカスタマイズ/オーバーライドすることを意図している人々を助けることを願って、ここに投稿します:)

注：下の[コードスニペットの実行]をクリックした後に結果を表示するには、ブラウザコンソールを開く必要がある場合があります（デフォルトではF12を押します）。

window.msg = (function (defaultConsole) {
  return Object.assign({}, defaultConsole, {
    log(text) {
      defaultConsole.log("%cLOG: %c" + text,
        "background-color: #fff; color: #5CB85C; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #5CB85C; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    info(text) {
      defaultConsole.info("%cINFO: %c" + text,
        "background-color: #fff; color: #337AB7; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #337AB7; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    warn(text) {
      defaultConsole.warn("%cWARN: %c" + text,
        "background-color: #fff; color: #F0AD4E; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #F0AD4E; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    error(text) {
      defaultConsole.error("%cERROR: %c" + text,
        "background-color: #fff; color: #D9534F; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #D9534F; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    }
  })
}(window.console));

msg.log('Log Message !');
msg.info('Info Message !');
msg.warn('Warn Message !');
msg.error('Error Message !');
msg.debug('Debug Message !');
msg.dir('Dir Message !');

/*Note: 1).If we assign the above to console instead of msg, the default console.log, console.info, etc would be overridden with custom styles;
        2).The above methods have utilized some ES6 features which may not be compatiable with old browsers, check below for ES5 version;
*/

//The ES5 Version
window.msg2 = (function (defaultConsole) {
  //The for loop within default console is to inherit all methods from it so that the uncustomized methods like msg2.debug(), msg2.dir(), etc won't throw errors;
  for (var key in defaultConsole) {
    this[key] = defaultConsole[key];
  }
  this.log = function (text) {
    defaultConsole.log("%cLOG: %c" + text,
      "background-color: #fff; color: #5cb85c; font-weight: bold; padding-left: 8px; font-size: 1.2em",
      "background-color: #5cb85c; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
  };
  this.info = function (text) {
    defaultConsole.info("%cINFO: %c" + text,
      "background-color: #fff; color: #337ab7; font-weight: bold; padding-left: 8px; font-size: 1.2em",
      "background-color: #337ab7; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
  };
  this.warn = function (text) {
    defaultConsole.warn("%cWARN: %c" + text,
      "background-color: #fff; color: #f0ad4e; font-weight: bold; padding-left: 8px; font-size: 1.2em",
      "background-color: #f0ad4e; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
  };
  this.error = function (text) {
    defaultConsole.error("%cERROR: %c" + text,
      "background-color: #fff; color: #d9534f; font-weight: bold; padding-left: 8px; font-size: 1.2em",
      "background-color: #d9534f; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
  }
  return this;
}(window.console));

msg2.log('Log Message !');
msg2.info('Info Message !');
msg2.warn('Warn Message !');
msg2.error('Error Message !');
msg2.debug('Debug Message !');
msg2.dir('Dir Message !');


//My Original Answer is as below, which seemed simpler and more readable, however, the uncustomized methods like msg3.debug(), msg3.dir(), etc would throw errors such as 'msg3.debug is not a function';
window.msg3 = (function (defaultConsole) {
  return {
    log: function (text) {
      defaultConsole.log("%cLOG: %c" + text,
        "background-color: #fff; color: #5CB85C; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #5CB85C; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    info: function (text) {
      defaultConsole.info("%cINFO: %c" + text,
        "background-color: #fff; color: #337AB7; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #337AB7; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    warn: function (text) {
      defaultConsole.warn("%cWARN: %c" + text,
        "background-color: #fff; color: #F0AD4E; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #F0AD4E; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    error: function (text) {
      defaultConsole.error("%cERROR: %c" + text,
        "background-color: #fff; color: #D9534F; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #D9534F; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    }
  };
}(window.console));
msg3.log('Log Message !');
msg3.info('Info Message !');
msg3.warn('Warn Message !');
msg3.error('Error Message !');
msg3.debug('Debug Message !');
msg3.dir('Dir Message !');

score 1 · Accepted Answer

これを試して：

var console={
    log: function(v){
        alert(v);
    }
};
console.log('hello world');

UPD：

これをチェックして：

var originalConsole={
    log: (function(c){
        return function(v){
            c.log(v);
        };
    }(window.console))
};
var console={
    log: function(v){
        originalConsole.log('_original_');
        originalConsole.log(v);
    }
};
console.log('hello world');

originalConsoleconsole元のオブジェクトの必要なメソッドを格納logし（私の例でのみ）、console新しいオブジェクトでオーバーライドされます。

UPD2

var console=(function(c){
    return {
        log: function(v){
            c.log('_original_');
            c.log(v);
        }
    };
}(window.console));
console.log('hello world');

これがお役に立てば幸いです。

score 1 · Accepted Answer

console.logオブジェクトで関数を呼び出していwindowます。代わりに、オブジェクトで呼び出す必要がありconsoleます。

console.log = function() {
  this.apply(console, arguments);
}.bind(console.log);

console.log('as');

score 0 · Accepted Answer

https://github.com/sunnykgupta/jsLoggerの使用をお勧めします

特徴：

console.logを安全にオーバーライドします。
コンソールが利用できない場合は注意してください（そうです、それも考慮に入れる必要があります）。
後で取得できるように、すべてのログを（抑制されている場合でも）保存します。
、、、などlogの主要なコンソール機能を処理します。warnerrorinfo

変更の可能性があり、新しい提案が出てくるたびに更新されます。

免責事項：私はプラグインの作成者です。

score 0 · Accepted Answer

1つの小さなポイント...console.log複数の引数を受け取ることができます。例：

console.log('results', result1, result2, result3);

この動作が必要な場合は、次のようにすることができます。

console.log = function(){
    var args = Array.from(arguments).join(' ');
    ...
}

score 0 · Accepted Answer

@Ludovicの以前の回答を拡張して、彼の回答もサポートするようにしますnodejs。

// define a new console
var console=(function(oldCons){
    return {
        log: function(text){
            oldCons.log(text);
            // Your code
        },
        info: function (text) {
            oldCons.info(text);
            // Your code
        },
        warn: function (text) {
            oldCons.warn(text);
            // Your code
        },
        error: function (text) {
            oldCons.error(text);
            // Your code
        }
    };
}(global.console !== undefined ? global.console : window.console));

javascript - Javascript-console.logをオーバーライドし、古い関数を保持します

8 に答える 8

Related

Reference