IE8のconsole.logはどうなりましたか?


254

この投稿によるとそれはベータ版でしたが、リリースではありませんか?


65
console.log ある IE8であり、しかし、consoleあなたはデベロッパーツールを開くまで、オブジェクトが作成されません。したがって、console.logたとえば、開発ツールを開く機会が得られる前にページの読み込み時に発生した場合、への呼び出しはエラーになる可能性があります。ここでの勝利の答えはそれをより詳細に説明しています。
SDC 2013年

回答:


229

フォールバックのためのさらに良いのはこれです:


   var alertFallback = true;
   if (typeof console === "undefined" || typeof console.log === "undefined") {
     console = {};
     if (alertFallback) {
         console.log = function(msg) {
              alert(msg);
         };
     } else {
         console.log = function() {};
     }
   }


71
これは非常に非現実的です。console.log()の呼び出しごとにアラートをスローするものを使用して、Webサイトをデバッグする方法はありますか。コードにlog()への10回以上の呼び出しがある場合はどうでしょうか。msgがオブジェクトの場合はどうなりますか?出発点として、ウォルターの答えははるかに理にかなっています。
Precastic 2013年

7
@Precastic:ブラウザーの使用をやめるだけです:P
Amogh Talpallikar 2014年

ミスターラッキーの回答に対する私のコメントを参照しください。
Daniel Schilling 14

1
控えめな(不完全ですが)代替フォールバックは、document.titleを設定することです。少なくとも、モーダルアラートでブラウザをロックすることはありません。
brennanyoung 2015年

257

console.logは、開発者ツールを開いた後でのみ使用できます(F12で開いたり閉じたりします)。おかしいのは、開いた後、閉じて、console.log呼び出しで投稿できることです。それらを再び開くと、それらが表示されます。私はそれが一種のバグであり、修正される可能性があると考えていますが、後で確認します。

私はおそらく次のようなものを使用します:

function trace(s) {
  if ('console' in self && 'log' in console) console.log(s)
  // the line below you might want to comment out, so it dies silent
  // but nice for seeing when the console is available or not.
  else alert(s)
}

そしてさらに簡単:

function trace(s) {
  try { console.log(s) } catch (e) { alert(s) }
}

11
どちらの方法でも、$ other-browsersがconsole.logを持たず、JavaScriptエラーで死ぬ可能性があるため、console.logを盲目的に呼び出すべきではありません。+1
ケントフレドリック

8
とにかく、リリースする前にトレースをオフにすることをお勧めします;)
ケントフレドリック

2
開発者ツールを開いていない状態でログを記録しないことは理にかなっていますが、サイレントに失敗するのではなく、ここで本当に混乱する決定である場合は、例外をスローするようにします。
ehdv 2010

4
このようにconsole.logをラップすることのマイナス面を指摘したいのですが、ログがどこから来ているのかもうわかりません。私は、非常に便利であることに気づきますが、その上、すべてのコンソール行がコード内のまったく同じ場所から発信されているのは間違っているように見えます。
マーティンウェスティン

2
alert悪です。一部のコードは、ドキュメントがフォーカスを失ったためにアラートが使用された場合の動作が異なり、バグの診断や以前にはなかったバグの作成がさらに困難になります。また、console.logプロダクションコードに誤ってを残した場合、それは無害です(爆発しないと仮定)-静かにコンソールにログを記録するだけです。alertプロダクションコードに誤ってを残すと、ユーザーエクスペリエンスが損なわれます。
ダニエルシリング14

56

これは、さまざまな答えに対する私の見解です。起動時にIEコンソールを開いていなくても、実際にログメッセージを確認したかったので、console.messages作成した配列にプッシュしました。またconsole.dump()、ログ全体を見やすくする機能も追加しました。console.clear()メッセージキューを空にします。

このソリューションは、他のコンソールメソッドも「処理」します(すべてFirebug Console APIに由来すると思います)。

最後に、このソリューションはIIFEの形式であるため、グローバルスコープを汚染しません。フォールバック関数の引数は、コードの下部で定義されています。

すべてのページに含まれている自分のマスターJSファイルにドロップするだけで、忘れてしまいます。

(function (fallback) {    

    fallback = fallback || function () { };

    // function to trap most of the console functions from the FireBug Console API. 
    var trap = function () {
        // create an Array from the arguments Object           
        var args = Array.prototype.slice.call(arguments);
        // console.raw captures the raw args, without converting toString
        console.raw.push(args);
        var message = args.join(' ');
        console.messages.push(message);
        fallback(message);
    };

    // redefine console
    if (typeof console === 'undefined') {
        console = {
            messages: [],
            raw: [],
            dump: function() { return console.messages.join('\n'); },
            log: trap,
            debug: trap,
            info: trap,
            warn: trap,
            error: trap,
            assert: trap,
            clear: function() { 
                  console.messages.length = 0; 
                  console.raw.length = 0 ;
            },
            dir: trap,
            dirxml: trap,
            trace: trap,
            group: trap,
            groupCollapsed: trap,
            groupEnd: trap,
            time: trap,
            timeEnd: trap,
            timeStamp: trap,
            profile: trap,
            profileEnd: trap,
            count: trap,
            exception: trap,
            table: trap
        };
    }

})(null); // to define a fallback function, replace null with the name of the function (ex: alert)

いくつかの追加情報

この行var args = Array.prototype.slice.call(arguments);は、argumentsオブジェクトから配列を作成します。引数は実際には配列ではないため、これは必須です。

trap()は、API関数のデフォルトハンドラです。引数をに渡すmessageので、API呼び出し(だけでなくconsole.log)に渡された引数のログを取得できます。

編集する

console.raw渡されたとおりに引数をキャプチャする追加の配列を追加しましたtrap()。私はそれを実現args.join(' ')文字列にオブジェクトを変換し"[object Object]"、時には望ましくないかもしれません。おかげでbfontaineのための提案


4
+1これは理にかなっている唯一の解決策です。明示的にコンソールに送信しているメッセージを見たいと思わない世界はありますか?
Precastic 2013年

すばらしい答えです。あなたが言及したIIFEの記事は本当に気に入りました。おそらくこれまでに読んだ中で最高のものの1つです。これらの2行のtrap機能の目的は何var args = Array.prototype.slice.call(arguments); var message = args.join(' ');ですか?なぜこれを介して引数をメッセージに渡すのですか?
user1555863 2013

1
@ user1555863質問に答えるために回答を更新しました。コードの下のセクションを参照してください。
Walter Stabosz 2013

1
"console.clear()"関数の2行目は、 "console.row.length = 0"ではなく、 "console.raw.length = 0"となるはずです。
スティーブJ

52

console.logIE8では真のJavaScript関数ではないことに注意してください。applyまたはcallメソッドはサポートしていません。


3
+1これは今朝の私の正確なエラーです。引数をconsole.logに適用しようとしていますが、IE8は私を嫌っています。
Bernhard Hofmann 2012年

[ジョーク] Microsoftは、「私たちは私たちに上書きコンソールオブジェクト人々を聞かせすることが危険だ」と言う:/を
トムRoggero

1
console.log=Function.prototype.bind.call(console.log,console);これを回避するために使用しています。
mowwwalker 2013年

1
IE8にはありませんbind
katspaugh 2013

44

アラートへのフォールバックを気にしないと仮定すると、Internet Explorerの欠点を回避するさらに簡潔な方法を次に示します。

var console=console||{"log":function(){}};

+1私はコードを無名関数にスコープしているので、コンソールをこのような変数に配置することが私にとって最良の解決策です。他のライブラリで起こっている他のコンソールのフックに干渉しないように私を助けます。
Codesleuth、2012

2
開発者ツールを開いたらすぐにロギングを開始したい。このソリューションを長期間有効なスコープ(たとえば、内部関数をコールバックとして登録する)に配置すると、サイレントフォールバックが引き続き使用されます。
Beni Cherniavsky-Paskin 2013

+ 1 / -1 = 0:+1ソリューションは、console.logsがIEのサイトを破壊するのを防ぐことに基づいているはずです-デバッグには使用されません...デバッグする場合は、f12を押してコンソールを開きます。 )-1上書きする前にコンソールが存在するかどうかを確認する必要があるため。
1nfiniti 2013年

一部のIEプラグインはconsoleとconsole.logを定義しますが、関数ではなく空のオブジェクトとして定義します。
リリスリバー

24

「orange80」の投稿が気に入っています。一度設定すれば忘れられるので、エレガントです。

他のアプローチでは、別のことを行う必要があります(プレーン以外の何かを呼び出す console.log()毎回)。これは単に問題を求めているだけです…私は最終的には忘れるでしょう。

私はそれをさらに一歩進めました。ユーティリティ関数にコードをラップすることにより、ロギングの前であればどこでも、JavaScriptの最初に一度呼び出すことができます。(これを会社のイベントデータルーター製品にインストールします。新しい管理インターフェイスのクロスブラウザー設計を簡素化するのに役立ちます。)

/**
 * Call once at beginning to ensure your app can safely call console.log() and
 * console.dir(), even on browsers that don't support it.  You may not get useful
 * logging on those browers, but at least you won't generate errors.
 * 
 * @param  alertFallback - if 'true', all logs become alerts, if necessary. 
 *   (not usually suitable for production)
 */
function fixConsole(alertFallback)
{    
    if (typeof console === "undefined")
    {
        console = {}; // define it if it doesn't exist already
    }
    if (typeof console.log === "undefined") 
    {
        if (alertFallback) { console.log = function(msg) { alert(msg); }; } 
        else { console.log = function() {}; }
    }
    if (typeof console.dir === "undefined") 
    {
        if (alertFallback) 
        { 
            // THIS COULD BE IMPROVED… maybe list all the object properties?
            console.dir = function(obj) { alert("DIR: "+obj); }; 
        }
        else { console.dir = function() {}; }
    }
}

1
あなたがそれを気に入ってくれてうれしい:-)私はあなたが言及した正確な理由のためにそれを使います--b / cそれは良い安全です。開発用のコードに "console.log"ステートメントをいくつか挿入して、後で削除するのを忘れるのは、あまりにも簡単です。少なくともこれを実行し、console.logを使用するすべてのファイルの先頭に配置すると、console.logで失敗したサイトが顧客のブラウザーに侵入することはありません。前に私を救った!素敵な改善、ところで:-)
jpswain

1
「削除するのを忘れるのは簡単すぎます」。一時的なデバッグログで常に行う1つの便利なことは、コードの前に空のコメントを付ける/**/console.log("...");ことです。これにより、一時的なコードを簡単に検索して見つけることができます。
Lawrence Dol、

8

すべてのconsole.log呼び出しが「未定義」になった場合は、古いFirebugliteがまだロードされていることを意味します(firebug.js)。IE8のconsole.logのすべての有効な機能が存在していても、それらは上書きされます。これはとにかく私に起こったことです。

コンソールオブジェクトをオーバーライドする他のコードを確認します。


5

コンソールを持たないブラウザに最適なソリューションは次のとおりです。

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

1
これには、console.groupまたはconsole.GroupCollapsedを使用してログに記録されたオブジェクトまたは文字列が完全に消えてしまうという明白な問題があります。これは不要です。利用できる場合は、console.logにマップする必要があります。
ベン

3

答えはたくさんあります。これに対する私の解決策は:

globalNamespace.globalArray = new Array();
if (typeof console === "undefined" || typeof console.log === "undefined") {
    console = {};
    console.log = function(message) {globalNamespace.globalArray.push(message)};   
}

つまり、console.logが存在しない(またはこの場合は開かれていない)場合は、ログをグローバル名前空間配列に格納します。これにより、何百万ものアラートに悩まされることなく、開発者コンソールを開いたり閉じたりしてもログを表示できます。


2
if(window.console && 'function' === typeof window.console.log){
    window.console.log(o);
}

それwindow.console.log()はIE8で利用できconsole.log()ない場合でも利用できる可能性があると言っていますか?
LarsH 2013年

ここでの問題は、それtypeof window.console.log === "object"ではないということです"function"
Isochronous

2

これが私の「IEクラッシュしないでください」です

typeof console=="undefined"&&(console={});typeof console.log=="undefined"&&(console.log=function(){});

1

私はこれをgithubで見つけました:

// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function f() {
    log.history = log.history || [];
    log.history.push(arguments);
    if (this.console) {
        var args = arguments,
            newarr;
        args.callee = args.callee.caller;
        newarr = [].slice.call(args);
        if (typeof console.log === 'object') log.apply.call(console.log, console, newarr);
        else console.log.apply(console, newarr);
    }
};

// make it safe to use console.log always
(function(a) {
    function b() {}
    for (var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","), d; !! (d = c.pop());) {
        a[d] = a[d] || b;
    }
})(function() {
    try {
        console.log();
        return window.console;
    } catch(a) {
        return (window.console = {});
    }
} ());

1

私は上からウォルターのアプローチを使用しています(https://stackoverflow.com/a/14246240/3076102を参照)

オブジェクトを適切に表示するために、https://stackoverflow.com/a/7967670ここで見つけたソリューションを混ぜます。

つまり、トラップ機能は次のようになります。

function trap(){
    if(debugging){
        // create an Array from the arguments Object           
        var args = Array.prototype.slice.call(arguments);
        // console.raw captures the raw args, without converting toString
        console.raw.push(args);
        var index;
        for (index = 0; index < args.length; ++index) {
            //fix for objects
            if(typeof args[index] === 'object'){ 
                args[index] = JSON.stringify(args[index],null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;');
            }
        }
        var message = args.join(' ');
        console.messages.push(message);
        // instead of a fallback function we use the next few lines to output logs
        // at the bottom of the page with jQuery
        if($){
            if($('#_console_log').length == 0) $('body').append($('<div />').attr('id', '_console_log'));
            $('#_console_log').append(message).append($('<br />'));
        }
    }
} 

これがお役に立てば幸いです:-)


0

IE8で動作します。F12キーを押して、IE8の開発者ツールを開きます。

>>console.log('test')
LOG: test

6
これは私の場合「未定義」を発行します。
acme 2010年

6
Mister Luckyが指摘したように、「console.logは、開発者ツールを開いた後にのみ利用できます(F12で開いたり閉じたりすることができます)。」
サイレンサー

0

私はこの方法が好きです(jqueryのdoc readyを使用)...つまり、IEでもコンソールを使用できます...ページの読み込み後にIEの開発ツールを開いた場合、ページを再読み込みする必要があるだけです...

すべての機能を考慮に入れると滑らかになる可能性がありますが、私はログのみを使用しているので、これは私が行うことです。

//one last double check against stray console.logs
$(document).ready(function (){
    try {
        console.log('testing for console in itcutils');
    } catch (e) {
        window.console = new (function (){ this.log = function (val) {
            //do nothing
        }})();
    }
});

0

以下は、開発者ツールが閉じているときではなく、開いているときにコンソールにログを記録するバージョンです。

(function(window) {

   var console = {};
   console.log = function() {
      if (window.console && (typeof window.console.log === 'function' || typeof window.console.log === 'object')) {
         window.console.log.apply(window, arguments);
      }
   }

   // Rest of your application here

})(window)

範囲が限定されており、コード実行の途中でIE8 DevToolsが開いている場合をサポートできますが、IE8では機能せず、console.logはオブジェクトであるため、applyメソッドがありません。
西

0

htmlで独自のコンソールを作成します.... ;-)これは実装できますが、次のように開始できます。

if (typeof console == "undefined" || typeof console.log === "undefined") {
    var oDiv=document.createElement("div");
    var attr = document.createAttribute('id'); attr.value = 'html-console';
    oDiv.setAttributeNode(attr);


    var style= document.createAttribute('style');
    style.value = "overflow: auto; color: red; position: fixed; bottom:0; background-color: black; height: 200px; width: 100%; filter: alpha(opacity=80);";
    oDiv.setAttributeNode(style);

    var t = document.createElement("h3");
    var tcontent = document.createTextNode('console');
    t.appendChild(tcontent);
    oDiv.appendChild(t);

    document.body.appendChild(oDiv);
    var htmlConsole = document.getElementById('html-console');
    window.console = {
        log: function(message) {
            var p = document.createElement("p");
            var content = document.createTextNode(message.toString());
            p.appendChild(content);
            htmlConsole.appendChild(p);
        }
    };
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.