はじめに
実機デバッグなどでデバッガに接続しない状態でも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]);
}
};