1. Qiita
  2. 投稿
  3. HTML

console.log()の値をサーバに出力

  • 17
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

実機デバッグなどでデバッガに接続しない状態でもconsole.log()の出力を見たいということで、処理を横取りしてサーバに送るようにします。

スクリプト

使い方は簡単で、このスクリプトを差し込んでおけば所定のURLにconsole.log()の値を送ります。
文字列の送り先(feed_url)は適宜変更してください。
console.pngは透明な1ピクセル画像とかを用意してもらえばいいです。
※console.log('%d',123);のような書式付きだとうまく動きません。

console_log.js
console.log = function() {
    var feed_url = './console.png';
    var feed = new Image();
    for (var i in arguments) {
        var now  = (new Date()).getTime() + Math.random() * 1000 ;
        feed.src = feed_url + '?tm=' + now + '&' + encodeURI(arguments[i]);
    }
};

これだけです。

サンプルHTMLです。ボタンを押すとinputの値をconsole.log()に出力します。
...が、console.log()を横取りしているので、http://~~/console.png?abcのようにサーバに情報を送ります。

index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>console.logの値をサーバに出力</title>

    <!-- このスクリプトを挿入するとconsole.logの出力をサーバに送ります -->
    <script type="text/javascript" src="console_log.js"></script>

    <script>
        function write_log() {
            var val = document.getElementById('word').value;
            console.log(val);
        }
    </script>

</head>

<body>

    <input type="text" id="word">
    <button onclick="write_log()">console.log</button>

</body>

</html>

デバッグがすんだら、このスクリプトを外すだけで解除できます。

追記 : 普通のコンソールにも併記する。

サーバだけじゃなくて普通のコンソールにも出したい場合は、console_log.jsをこんな感じにしてください。

console_log.js
console.original = console.log;//上書き前に退避して
console.log = function() {

    console.original.apply(console,arguments);//呼び戻す

    var feed_url = './console.png';
    var feed = new Image();
    for (var i in arguments) {
        var now  = (new Date()).getTime() + Math.random() * 1000 ;
        feed.src = feed_url + '?tm=' + now + '&' + encodeURI(arguments[i]);
    }
};