「コンソール」はInternet Explorerの未定義エラーです


375

私はFirebugを使用しており、次のようなステートメントがあります。

console.log("...");

私のページで。IE8(おそらく以前のバージョンも)では、「コンソール」が未定義であるというスクリプトエラーが発生します。私はこれを自分のページの一番上に置いてみました:

<script type="text/javascript">
    if (!console) console = {log: function() {}};
</script>

それでもエラーが発生します。エラーを取り除く方法はありますか?


4
用途typeof:あなた、それは未定義のエラーを回避するかどうかで if(typeof console === "undefined") { var console = { log: function (logMsg) { } }; }
フラックDiNenno

21
console.log()は、IEの開発ツールが開いている場合にのみ機能します(IEはひどいです)。stackoverflow.com/questions/7742781/…を
Adrien Be

1
その質問に対する最良の答えは、stackoverflow.com
a / 16916941/2274855 –ViníciusMoraes、


1
@Aprillionリンクが壊れています。代わりに次のリンクを使用してください:github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Alfred Bez

回答:


378

試す

if (!window.console) console = ...

未定義の変数を直接参照することはできません。ただし、すべてのグローバル変数はグローバルコンテキストと同じ名前の属性であり(windowブラウザーの場合)、未定義の属性にアクセスすることは問題ありません。

またはif (typeof console === 'undefined') console = ...、マジック変数を避けたい場合はwindow@ Tim Downの回答を参照してください。


160
これを使用している他の人にわかりやすくするため<script type="text/javascript"> if (!window.console) console = {log: function() {}}; </script>に、ページの上部に配置してください!ケニーありがとう。
windowsgm

11
どうですかvar console = console || { log: function() {} };
devlord

9
あなたは含める必要が速記使用することを@lorddev windowvar console = window.console || { log: function() {} };
jlengstorf

64
くそー...あなたはあなたのお気に入りのブラウザのためにそれを開発して、素晴らしいウェブサイトを作ります 最後に、4〜5時間を費やして、他のすべてのMODERNブラウザーと互換性を持たせ、次に4〜5日を費やして、IEと互換性を持たせます。
イスラエル

6
あなたは、警告、デバッグなどの別の名前を使用してブラウザでカウントされている場合はその答えの問題は、不足コンソールがその行うには良い方法を参照例外をスローしますということですstackoverflow.com/a/16916941/2274855
ヴィニシウスモラエス

319

JavaScriptの上部に以下を貼り付けます(コンソールを使用する前に):

/**
 * Protect window.console method calls, e.g. console is not defined on IE
 * unless dev tools are open, and IE doesn't define console.debug
 * 
 * Chrome 41.0.2272.118: debug,error,info,log,warn,dir,dirxml,table,trace,assert,count,markTimeline,profile,profileEnd,time,timeEnd,timeStamp,timeline,timelineEnd,group,groupCollapsed,groupEnd,clear
 * Firefox 37.0.1: log,info,warn,error,exception,debug,table,trace,dir,group,groupCollapsed,groupEnd,time,timeEnd,profile,profileEnd,assert,count
 * Internet Explorer 11: select,log,info,warn,error,debug,assert,time,timeEnd,timeStamp,group,groupCollapsed,groupEnd,trace,clear,dir,dirxml,count,countReset,cd
 * Safari 6.2.4: debug,error,log,info,warn,clear,dir,dirxml,table,trace,assert,count,profile,profileEnd,time,timeEnd,timeStamp,group,groupCollapsed,groupEnd
 * Opera 28.0.1750.48: debug,error,info,log,warn,dir,dirxml,table,trace,assert,count,markTimeline,profile,profileEnd,time,timeEnd,timeStamp,timeline,timelineEnd,group,groupCollapsed,groupEnd,clear
 */
(function() {
  // Union of Chrome, Firefox, IE, Opera, and Safari console methods
  var methods = ["assert", "cd", "clear", "count", "countReset",
    "debug", "dir", "dirxml", "error", "exception", "group", "groupCollapsed",
    "groupEnd", "info", "log", "markTimeline", "profile", "profileEnd",
    "select", "table", "time", "timeEnd", "timeStamp", "timeline",
    "timelineEnd", "trace", "warn"];
  var length = methods.length;
  var console = (window.console = window.console || {});
  var method;
  var noop = function() {};
  while (length--) {
    method = methods[length];
    // define undefined methods as noops to prevent errors
    if (!console[method])
      console[method] = noop;
  }
})();

関数クロージャーラッパーは、変数を定義しないように変数のスコープを設定します。これは、未定義consoleと未定義の両方console.debug(およびその他の欠落メソッド)から保護します。

編集:(おそらく)最新の状態に保つソリューションを探している場合、HTML5ボイラープレートはjs / plugins.jsファイルで同様のコードを使用していることに気付きました。


14
なぜこの回答は賛成票が少ないのですか?ここに掲載されているものの中で最も完全なものです。
mavilein 2013

日付のため。正しい動作ソリューションに絶対に同意します。このトピックはモデレートする必要があると思います。悪い英語でごめんなさい。
woto 2013

ログ機能(存在する場合)にログをリダイレクトしないため、すべてのログが失われることを除いて、かなり完全です
Christophe Roussy 2013年

5
これは正確にいつ発生しますか?このコードは、まだ定義されていない要素のみを定義する必要があります。
Peter Tseng

4
私はどちらかと思います-(function(){...}())または(function(){...})()-実際に動作します
Peter Tseng

73

別の選択肢はtypeof演算子です:

if (typeof console == "undefined") {
    this.console = {log: function() {}};
}

さらに別の方法として、自分のlog4javascriptなどのロギングライブラリを使用することもできます。


ただし、宣言されていない割り当てを適切な宣言に変更することをお勧めします。
kangax 2010

1
使うつもりvarですか?ここでは混乱するだけです。または、window.consoleではなくに割り当てることを意味しますconsoleか?
Tim Down

を使用しvarます。なぜここで混乱するのですか?
kangax 2010

2
何と紛らわしい議論か。元の回答に+1。私が+2を与えることができれば、あなた自身のlog4javascriptへのリンクを提供することになります。OPありがとう!
ジェイテイラー

8
@yckart:いいえ。typeof文字列を返すことが保証されて"undefined"おり、文字列です。二つのオペランドが同じタイプのものであり、とき=====まったく同じ手順を実行するために指定されています。を使用するtypeof x == "undefined"と、xスコープやECMAScript 3準拠の環境でが未定義であるかどうかをテストするための堅実な方法です。
Tim Down

47

より堅牢なソリューションとして、次のコードを使用します(Twitterのソースコードから取得)。

// 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;
        }
    }
}());

13

スクリプトでは、省略形を使用します。

window.console && console.log(...) // only log if the function exists

または、すべてのconsole.log行を編集することが不可能または不可能な場合は、偽のコンソールを作成します。

// check to see if console exists. If not, create an empty object for it,
// then create and empty logging function which does nothing. 
//
// REMEMBER: put this before any other console.log calls
!window.console && (window.console = {} && window.console.log = function () {});

2
構文エラー。なぜだけではないif(!console) {console = {} ; console.log = function(){};}
Meekohi

1
またはそれだけではない!window.console && (window.console = { log: function () { } });
Maksim Vi。

10

IE8で開いconsole.log()ている場合に使用Developer ToolsできConsoleます。また、[スクリプト]タブのテキストボックスを使用できます。


7
コンソールのコードを変更するのを忘れた場合、これは良くありません。IE8のエラーにより、JSコードが機能し
ません

7
if (typeof console == "undefined") {
  this.console = {
    log: function() {},
    info: function() {},
    error: function() {},
    warn: function() {}
  };
}

1
警告エンプター:はをthis参照するグローバルレベルで定義する必要がありますwindow
Sgnl 2017

7

による2つの以前の回答に基づく

およびドキュメント

これが問題のベストエフォートの実装です。つまり、実際に存在するconsole.logがある場合、console.logを介して、存在しないメソッドのギャップを埋めます。

たとえば、IE6 / 7の場合、ロギングをアラートに置き換え(愚かですが機能します)、次に以下のモンスター(私はconsole.jsと呼びます)を含めることができます。最小化プログラムはそれらに取り組むことができます]:

<!--[if lte IE 7]>
<SCRIPT LANGUAGE="javascript">
    (window.console = window.console || {}).log = function() { return window.alert.apply(window, arguments); };
</SCRIPT>
<![endif]-->
<script type="text/javascript" src="console.js"></script>

およびconsole.js:

    /**
     * Protect window.console method calls, e.g. console is not defined on IE
     * unless dev tools are open, and IE doesn't define console.debug
     */
    (function() {
        var console = (window.console = window.console || {});
        var noop = function () {};
        var log = console.log || noop;
        var start = function(name) { return function(param) { log("Start " + name + ": " + param); } };
        var end = function(name) { return function(param) { log("End " + name + ": " + param); } };

        var methods = {
            // Internet Explorer (IE 10): http://msdn.microsoft.com/en-us/library/ie/hh772169(v=vs.85).aspx#methods
            // assert(test, message, optionalParams), clear(), count(countTitle), debug(message, optionalParams), dir(value, optionalParams), dirxml(value), error(message, optionalParams), group(groupTitle), groupCollapsed(groupTitle), groupEnd([groupTitle]), info(message, optionalParams), log(message, optionalParams), msIsIndependentlyComposed(oElementNode), profile(reportName), profileEnd(), time(timerName), timeEnd(timerName), trace(), warn(message, optionalParams)
            // "assert", "clear", "count", "debug", "dir", "dirxml", "error", "group", "groupCollapsed", "groupEnd", "info", "log", "msIsIndependentlyComposed", "profile", "profileEnd", "time", "timeEnd", "trace", "warn"

            // Safari (2012. 07. 23.): https://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html#//apple_ref/doc/uid/TP40007874-CH8-SW20
            // assert(expression, message-object), count([title]), debug([message-object]), dir(object), dirxml(node), error(message-object), group(message-object), groupEnd(), info(message-object), log(message-object), profile([title]), profileEnd([title]), time(name), markTimeline("string"), trace(), warn(message-object)
            // "assert", "count", "debug", "dir", "dirxml", "error", "group", "groupEnd", "info", "log", "profile", "profileEnd", "time", "markTimeline", "trace", "warn"

            // Firefox (2013. 05. 20.): https://developer.mozilla.org/en-US/docs/Web/API/console
            // debug(obj1 [, obj2, ..., objN]), debug(msg [, subst1, ..., substN]), dir(object), error(obj1 [, obj2, ..., objN]), error(msg [, subst1, ..., substN]), group(), groupCollapsed(), groupEnd(), info(obj1 [, obj2, ..., objN]), info(msg [, subst1, ..., substN]), log(obj1 [, obj2, ..., objN]), log(msg [, subst1, ..., substN]), time(timerName), timeEnd(timerName), trace(), warn(obj1 [, obj2, ..., objN]), warn(msg [, subst1, ..., substN])
            // "debug", "dir", "error", "group", "groupCollapsed", "groupEnd", "info", "log", "time", "timeEnd", "trace", "warn"

            // Chrome (2013. 01. 25.): https://developers.google.com/chrome-developer-tools/docs/console-api
            // assert(expression, object), clear(), count(label), debug(object [, object, ...]), dir(object), dirxml(object), error(object [, object, ...]), group(object[, object, ...]), groupCollapsed(object[, object, ...]), groupEnd(), info(object [, object, ...]), log(object [, object, ...]), profile([label]), profileEnd(), time(label), timeEnd(label), timeStamp([label]), trace(), warn(object [, object, ...])
            // "assert", "clear", "count", "debug", "dir", "dirxml", "error", "group", "groupCollapsed", "groupEnd", "info", "log", "profile", "profileEnd", "time", "timeEnd", "timeStamp", "trace", "warn"
            // Chrome (2012. 10. 04.): https://developers.google.com/web-toolkit/speedtracer/logging-api
            // markTimeline(String)
            // "markTimeline"

            assert: noop, clear: noop, trace: noop, count: noop, timeStamp: noop, msIsIndependentlyComposed: noop,
            debug: log, info: log, log: log, warn: log, error: log,
            dir: log, dirxml: log, markTimeline: log,
            group: start('group'), groupCollapsed: start('groupCollapsed'), groupEnd: end('group'),
            profile: start('profile'), profileEnd: end('profile'),
            time: start('time'), timeEnd: end('time')
        };

        for (var method in methods) {
            if ( methods.hasOwnProperty(method) && !(method in console) ) { // define undefined methods as best-effort methods
                console[method] = methods[method];
            }
        }
    })();

methods.hasOwnProperty(method) && forループが必要かどうかはわかりません。
TWiStErRob 2013

きっと必要でしょう。
ErikE 2013年

Chromeのコンソールで簡単なテストを行いました:> x = { a: 1, b: 2}-> Object {a: 1, b: 2}およびfor(var f in x) {console.log(f + " " + x[f]);} 'end'-> a 1 b 2 "end"。したがって、作成された匿名オブジェクトには追加のプロパティはなくmethodsforループの前に作成されます。上記をハッキングすることは可能ですか?
TWiStErRob 2013年

3
はい。var x = { a: 1, b: 2}; Object.prototype.surprise = 'I\'m in yer objectz'; for (var f in x) {console.log(f, x[f]);}作業しているオブジェクトの継承チェーン内のオブジェクトに対してライブラリが何をしたかは決してわかりません。したがって、jshintやjslintのようなjavascriptコード品質ツールを使用することをお勧めしますhasOwnProperty
ErikE 2013年

6

IE9では、コンソールが開かれていない場合、このコードは次のようになります。

alert(typeof console);

「オブジェクト」が表示されますが、このコード

alert(typeof console.log);

TypeError例外をスローしますが、未定義の値は返しません。

したがって、コードの保証バージョンは次のようになります。

try {
    if (window.console && window.console.log) {
        my_console_log = window.console.log;
    }
} catch (e) {
    my_console_log = function() {};
}

6

私のコードではconsole.logのみを使用しています。だから私は非常に短い2ライナーを含めます

var console = console || {};
console.log = console.log || function(){};

1
どのように動作するか.. IEブラウザーに出力されたconsole.log行が表示されない。2つの異なるシステムでテストしました。私は両方で試しましたが、両方のシステムでログを見ることができませんでした。
kiran 2016

2

OPはIEでFirebugを使用しているため、Firebug Liteであると想定しています。デバッガーウィンドウを開いたときにコンソールがIEで定義されるため、これはファンキーな状況ですが、Firebugが既に実行されている場合はどうなりますか?確かではありませんが、おそらく「firebugx.js」メソッドはこの状況でテストするための良い方法かもしれません:

ソース:

https://code.google.com/p/fbug/source/browse/branches/firebug1.2/lite/firebugx.js?r=187

    if (!window.console || !console.firebug) {
        var names = [
            "log", "debug", "info", "warn", "error", "assert",
            "dir","dirxml","group","groupEnd","time","timeEnd",
            "count","trace","profile","profileEnd"
        ];
        window.console = {};
        for (var i = 0; i < names.length; ++i)
            window.console[names[i]] = function() {}
    }

(更新されたリンク12/2014)



1

IEでのデバッグについては、このlog4javascriptをチェックしてください


これは素晴らしいことです。特に、私のIE8コンソールは何も出力しません。
Firsh-LetsWP.io 2013年

1
@Firshコメントありがとうございます。
Praveen 2013年

1
私はここで「恥知らずな自己宣伝」または私が知らない別の質問についてのコメントを探していました-同様に-彼がこのsciptを作成したと言った誰か、あなたでしたか?そのタブはすでに閉じています。とにかく、それは本当に素晴らしいツールであり、私のプロジェクトにとって非常に便利です。
Firsh-LetsWP.io 2013年

1
@Firsh私はこのスクリプトを作成しなかった、私はあなたがツールを使用して利益を得たような人です。
Praveen 2013年

1

IE8またはコンソールのサポートがconsole.logに制限されている場合(デバッグ、トレースなどはありません)、以下を実行できます。

  • コンソールまたはconsole.logが未定義の場合:コンソール関数(トレース、デバッグ、ログなど)のダミー関数を作成します。

    window.console = { debug : function() {}, ...};

  • そうでない場合、console.logが定義されている(IE8)かつconsole.debug(その他の)が定義されていない場合:すべてのロギング関数をconsole.logにリダイレクトすると、これらのログを保持できます!

    window.console = { debug : window.console.log, ...};

さまざまなIEバージョンでのアサートサポートについては不明ですが、提案は大歓迎です。この回答もここに投稿しました:Internet Explorerでコンソールログを使用するにはどうすればよいですか?



1

TypeScriptのコンソールのスタブ:

if (!window.console) {
console = {
    assert: () => { },
    clear: () => { },
    count: () => { },
    debug: () => { },
    dir: () => { },
    dirxml: () => { },
    error: () => { },
    group: () => { },
    groupCollapsed: () => { },
    groupEnd: () => { },
    info: () => { },
    log: () => { },
    msIsIndependentlyComposed: (e: Element) => false,
    profile: () => { },
    profileEnd: () => { },
    select: () => { },
    time: () => { },
    timeEnd: () => { },
    trace: () => { },
    warn: () => { },
    }
};

0

以下を使用して、すべての拠点がカバーされている追加の保険を与えることができます。typeof最初に使用すると、undefinedエラーが回避されます。を使用===すると、型の名前が実際には文字列「未定義」であることが保証されます。最後に、logMsg一貫性を確保するために、関数のシグネチャにパラメータを追加します(任意に選択しました)。これは、コンソールに出力したいものをすべてログ関数に渡すためです。また、IntelliSenseを正確に保ち、​​JS対応IDEでの警告/エラーを回避します。

if(!window.console || typeof console === "undefined") {
  var console = { log: function (logMsg) { } };
}


0

window.open関数によって作成されたIE9の子ウィンドウでconsole.logを実行すると、同様の問題が発生しました。

この場合、コンソールは親ウィンドウでのみ定義され、更新するまで子ウィンドウでは定義されていないようです。同じことが子ウィンドウの子にも適用されます。

次の関数でログをラップすることでこの問題に対処します(以下はモジュールのフラグメントです)

getConsole: function()
    {
        if (typeof console !== 'undefined') return console;

        var searchDepthMax = 5,
            searchDepth = 0,
            context = window.opener;

        while (!!context && searchDepth < searchDepthMax)
        {
            if (typeof context.console !== 'undefined') return context.console;

            context = context.opener;
            searchDepth++;
        }

        return null;
    },
    log: function(message){
        var _console = this.getConsole();
        if (!!_console) _console.log(message);
    }

-2

これに関して非常に多くの問題が発生した後(開発者コンソールを開くとエラーが発生しなくなったため、エラーをデバッグするのは困難です!)私はこれを二度と気にする必要がないように過剰なコードを作成することにしました。

if (typeof window.console === "undefined")
    window.console = {};

if (typeof window.console.debug === "undefined")
    window.console.debug= function() {};

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

if (typeof window.console.error === "undefined")
    window.console.error= function() {alert("error");};

if (typeof window.console.time === "undefined")
    window.console.time= function() {};

if (typeof window.console.trace === "undefined")
    window.console.trace= function() {};

if (typeof window.console.info === "undefined")
    window.console.info= function() {};

if (typeof window.console.timeEnd === "undefined")
    window.console.timeEnd= function() {};

if (typeof window.console.group === "undefined")
    window.console.group= function() {};

if (typeof window.console.groupEnd === "undefined")
    window.console.groupEnd= function() {};

if (typeof window.console.groupCollapsed === "undefined")
    window.console.groupCollapsed= function() {};

if (typeof window.console.dir === "undefined")
    window.console.dir= function() {};

if (typeof window.console.warn === "undefined")
    window.console.warn= function() {};

個人的にconsole.logとconsole.errorのみを使用しますが、このコードはMozzila開発者ネットワーク(https://developer.mozilla.org/en-US/docs/Web/API/console)に示されている他のすべての機能を処理します。。そのコードをページの上部に置くだけで、これで永遠に終わります。


-11

Firefoxでは直接console.log(...)を使用できますが、IEでは使用できません。IEでは、window.consoleを使用する必要があります。


11
console.logおよびwindow.console.logは、ECMAscriptにリモートで準拠しているブラウザでも同じ機能を参照します。後者を使用してローカル変数が誤ってグローバルコンソールオブジェクトをシャドウしないようにすることをお勧めしますが、ブラウザの選択とはまったく関係ありません。console.logはIE8で正常に動作し、AFAIKはIE6 / 7でロギング機能がまったくありません。
Tgr
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.