Help us understand the problem. What is going on with this article?

JavaScript console.log を書き換えて出力内容を横取りする。

More than 1 year has passed since last update.

はじめに

console.log の機能を拡張したい場合、myconsoleLog とか作って、内部で console.log を読んだり、内容をファイルに出力したり、サーバーに情報送信、みたいなことはやるかもしれないですが、

ここでは console.log 自体を書き換えて機能追加します。

また、元の console.log に戻すこともできるようにします。

コード

結構簡単です。

  var consoleExt = {};
  consoleExt.originalConsoleLog = console.log;
  consoleExt.result = '';
  consoleExt.delimiter = ';';
  consoleExt.logOutput = true;

  consoleExt.log = function(message) {
    if (consoleExt.logOutput) {
      consoleExt.originalConsoleLog(message);
    }
    if (isObject(message)) {
      consoleExt.result += objToString(message) + consoleExt.delimiter;
    } else {
      consoleExt.result += message + consoleExt.delimiter;
    }
  };

  consoleExt.hook = function() {
    if (consoleExt.originalConsoleLog === console.log) {
      console.log = consoleExt.log;
    }
  };
  consoleExt.unhook = function() {
    if (consoleExt.originalConsoleLog !== console.log) {
      console.log = consoleExt.originalConsoleLog;
    }
  };

isObject は オブジェクト判定していて、objToStringは、オブジェクトを文字列にするものです。記事最後に全文載せています。

要点はそこではなく、単にconsole.logを書き換えているよ。ということです。

使い方

consoleExt.hook() で、console.log の横取りをします。
横取り後は、console.log をした時に、consoleExt.result に内容を追記していきます。

consoleExt.result をクリアしたりすることができます。

consoleExt.delimiter は、結果バッファに記録するときに console.logしたあとの区切り文字を指定します。

consoleExt.logOutput はBooleanで指定することができ、trueなら、新しい console.log を呼び出した時に、元の console.log で内容を出力します。

consoleExt.unhook() で、console.log の横取りを解除します。

全文

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="" >

    <script src=""></script>

<script>

  var isObject = function(value) {
    if (
      (Object.prototype.toString.call(value) === '[object Object]')
      && (!Array.isArray(value))
      && (value !== null)
      && (typeof value !== 'undefined')
    ) {
      return true;
    }
    return false;
  };

  //オブジェクトを文字列化する関数
  //JSON.stringify を利用して
  //  {valueA: 123, valueB: "123"}
  //という形式の文字列を作成する
  var objToString = function(obj) {
    var items = JSON.stringify(obj).split(',');
    items = items.map(function(element, index, array) {
      return element.replace(/(.+:)(.*)/,
        function(string, capture1, capture2) {
          return capture1.replace(/\"/g, '') + capture2;
        }).replace(/:/g, ': ');
      //[:]の前後でcapture1/2に分割して、
      //その後に[:]の前だけ["]を削除して
      //[:]は[: ]に置換
    });
    return items.join(', ');
    //[,]は[, ]に置換
  };

  var consoleExt = {};
  consoleExt.originalConsoleLog = console.log;
  consoleExt.result = '';
  consoleExt.delimiter = ';';
  consoleExt.logOutput = true;

  consoleExt.log = function(message) {
    if (consoleExt.logOutput) {
      consoleExt.originalConsoleLog(message);
    }
    if (isObject(message)) {
      consoleExt.result += objToString(message) + consoleExt.delimiter;
    } else {
      consoleExt.result += message + consoleExt.delimiter;
    }
  };

  consoleExt.hook = function() {
    if (consoleExt.originalConsoleLog === console.log) {
      console.log = consoleExt.log;
    }
  };
  consoleExt.unhook = function() {
    if (consoleExt.originalConsoleLog !== console.log) {
      console.log = consoleExt.originalConsoleLog;
    }
  };


consoleExt.hook();

consoleExt.result = '';
consoleExt.logOutput = true;
console.log('test01');

consoleExt.logOutput = false;
console.log('test02');

alert(consoleExt.result);

consoleExt.unhook();

console.log('test03');

alert(consoleExt.result);

</script>
  </head>
  <body>
  </body>
</html>

実行すると、
test01 は、コンソールの出力され、結果バッファに記録され、

test02 は、コンソールに出力されないが、結果バッファに記録され、

test03 は、コンソールに出力されるが、結果バッファには記録されない、

というように動作コントロールできます。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした