LoginSignup
10
7

More than 5 years have passed since last update.

console.log,timerのないブラウザのデバック

Last updated at Posted at 2015-03-25

古いブラウザはconsole.logやtimerがないので不便です。
特にパフォーマンス問題などが発生した場合、調査したいけどロガーもタイマーもないでは全くやる気がおきないです。

何度かそんなことを経験して毎度alertを仕込んできたのですが、
いい加減うんざりしてきたので、console.logとconsole.timerを自作しました。

基本的にはwebkitの仕様にしたがったつもりです。細かい動きは抜けているかもしれません。
conosleオブジェクトがない場合は、HTMLに吐き出すようにしています。

console.timeやerrorなどが個別にない場合は
console.logを使って出力するようにしています。

        //生成したdivに出力
        window.console.log = function(value){
            var html = "";
            var i= 0;

            for(i;i<arguments.length;i++)
            {
                html += arguments[i];
            }

            div.innerHTML += html + "</br>";
        };

        window.console.error = window.console.log;
        //タイマーを開始
        window.console.time = function(key){
            window.time || (window.time = {});

            window.time[key] = new Date().getTime();
        };

        //タイマーを終了
        window.console.timeEnd = function(key){
            window.time || (window.time = {});

            var processTime = +new Date() - window.time[key];
            window.console.log("Time " + key + ":" + processTime + "msec");

            delete window.time[key];
        };

全体はこちらです。

IE7,8あたりで動作確認をしました。それなりに動いています。
スタイルは好きに編集してもらうのがいいと思います。

依存ファイルもなく単体で動くようにつくったのでscriptタグにはっつけてもらえば単体で動きます。bodyタグのなかで呼んでください。

8年も前のブラウザが未だ現役とか本当切ない。
8年前のブラウザで8年後のサイトをみたら、それは色々あるに決まっている!

10
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7