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

Question

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

console.log("...");

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

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

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

score 379 · Accepted Answer

試す

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

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

またはif (typeof console === 'undefined') console = ...、魔法の変数を避けたい場合に使用します。 @Tim Down の回答windowを参照してください。

score 322 · Accepted Answer

以下を 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;
  }
})();

関数クロージャーラッパーは、変数を定義しないように変数のスコープを設定します。これにより、undefinedconsoleと undefined console.debug(およびその他の欠落しているメソッド) の両方が防止されます。

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

score 74 · Accepted Answer

もう 1 つの選択肢は、次のtypeof演算子です。

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

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

score 47 · Accepted Answer

より堅牢なソリューションについては、次のコードを使用してください (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;
        }
    }
}());

score 13 · Accepted Answer

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

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

score 10 · Accepted Answer

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

score 7 · Accepted Answer

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

score 6 · Accepted Answer

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

score 1 · Accepted Answer

私はfauxconsoleを使用しています; cssを少し変更して、見栄えが良くなりましたが、非常にうまく機能するようにしました。

score 1 · Accepted Answer

1

IE でのデバッグについては、このlog4javascriptを確認してください。

于 2013-02-22T04:22:16.377 に答える

score 0 · Accepted Answer

以下を使用して、すべての拠点をカバーしているという追加の保険をかけることができます。最初に使用すると、エラーtypeofを回避できます。undefinedを使用===すると、型の名前が実際には文字列「undefined」であることも保証されます。最後に、一貫性を確保するために、関数のシグネチャにパラメータを追加する必要があります（私はlogMsg任意に選択しました）。これは、コンソールに出力したいものをすべてログ関数に渡すためです。これにより、インテリセンスが正確に保たれ、JS対応IDEでの警告/エラーが回避されます。

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

score 0 · Accepted Answer

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

score -2 · Accepted Answer

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

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 Developer Network に示されているように、他のすべての機能を処理します: https://developer.mozilla.org/en-US/docs/Web/API/console . そのコードをページの上部に配置するだけで、これで永遠に完了です.

score -11 · Accepted Answer

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

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

21 に答える 21

Related

Reference