IE8에서 console.log는 어떻게 되었습니까?


254

이 게시물 에 따르면 베타 버전이지만 릴리스되지 않았습니까?


65
console.log 이다 IE8에 존재하지만, console객체를 열 DevTools로까지 만들어지지 않습니다. 따라서 console.log개발자 도구를 열기 전에 페이지로드시 오류가 발생하는 경우 호출 하면 오류가 발생할 수 있습니다. 여기서 정답은 이에 대한 자세한 설명입니다.
SDC

답변:


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 ()를 호출 할 때마다 경고를 발생시키는 것으로 웹 사이트를 디버깅 할 수 있습니까? 코드에서 log ()를 10 번 이상 호출하면 어떻게됩니까? msg가 객체라면? 월터의 대답 은 출발점으로 훨씬 더 의미가 있습니다.
Precastic 2016 년

7
@Precastic : 사람들은 브라우저 사용을 중지합니다 : P
Amogh Talpallikar

Lucky 선생님의 답변에 대한 나의 의견 을 참조하십시오 .
Daniel Schilling

1
눈에 거슬리지 않는 (아직 불완전한) 대안책은 document.title을 설정하는 것입니다. 적어도 모달 경고로 브라우저를 잠그지 않습니다.
brennanyoung

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는 그것을 가지고 있지 않아서 JavaScript 오류로 죽을 수 있기 때문에 console.log를 맹목적으로 호출해서는 안됩니다. +1
Kent Fredric 2016 년

8
그래도 릴리스 전에 추적을 해제하고 싶을 것입니다.)
Kent Fredric

2
개발자 도구가 열려 있지 않은 상태에서 로그하지 않는 것이 좋지만, 자동 실패가 아니라 예외를 발생시키는 것이 여기서 실제로 혼란스러운 결정입니다.
ehdv

4
console.log를 래핑하는 것에 대한 단점을 지적하고 싶습니다 ... 더 이상 로깅이 시작되는 곳을 볼 수 없습니다. 때로는 매우 유용하다는 것이 모든 콘솔 라인이 코드의 동일한 위치에서 시작되는 것으로 잘못 보이는 것 같습니다.
Martin Westin

2
alert악하다. 문서가 포커스를 잃기 때문에 이전에 없었던 버그를 진단하거나 작성하기가 더 어려워지기 때문에 경고가 사용될 때 일부 코드가 다르게 작동합니다. 또한 실수로 console.log프로덕션 코드에 코드를 남겨두면 코드가 부드럽 지 않다는 가정하에 콘솔에 자동으로 기록됩니다. 실수로 alert생산 코드를 남겨두면 사용자 경험이 손상됩니다.
Daniel Schilling

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객체 에서 배열을 만듭니다 . 인수는 실제로 Array가 아니기 때문에 필수 입니다.

trap()모든 API 함수의 기본 핸들러입니다. 나는 인수를 message전달하여 API 호출에 전달 된 인수의 로그를 얻습니다 console.log.

편집하다

console.raw전달 된대로 정확하게 인수를 캡처 하는 추가 배열 을 추가 했습니다 trap(). 때로는 바람직하지 않은 args.join(' ')객체를 문자열로 변환하고 있음을 깨달았습니다 "[object Object]". 덕분에 bfontaine 에 대한 제안 .


4
+1 이것은 이해하기 시작한 유일한 솔루션입니다. 어떤 세계에서 당신은 할 수 없습니다 명시 적으로 콘솔에 보내는 메시지를보고 싶어!
Precastic 2016 년

좋은 대답입니다. 당신이 언급 한 IIFE 기사를 정말 좋아했습니다. 아마도 지금까지 읽은 최고의 것 중 하나 일 것입니다. 이 두 줄의 trap기능 이 무엇인지 자세히 설명해 주 var args = Array.prototype.slice.call(arguments); var message = args.join(' ');시겠습니까? 이것을 통해 왜 인수를 메시지에 전달합니까?
user1555863

1
@ user1555863 질문에 답변하기 위해 답변을 업데이트했습니다. 코드 아래 섹션을 참조하십시오.
Walter Stabosz

1
"console.clear ()"함수의 두 번째 줄에 "console.row.length = 0"대신 "console.raw.length = 0"이 표시되어야한다고 생각합니다.
Steve J

52

console.logIE8에서는 진정한 자바 스크립트 기능이 아니라는 점에 주목할 가치가 있습니다. apply또는 call메소드를 지원하지 않습니다 .


3
+1 오늘 아침 내 정확한 오류입니다. console.log에 인수를 적용하려고하는데 IE8이 나를 미워합니다.
Bernhard Hofmann

[농담] 마이크로 소프트는 "사람들이 콘솔 객체를 덮어 쓰게하는 것은 안전하지 않다"고 말했다 : /
Tom Roggero

1
이 문제를 console.log=Function.prototype.bind.call(console.log,console);해결하기 위해 사용 하고 있습니다.
mowwwalker

1
IE8에는 없습니다 bind.
katspaugh

44

경고 할 폴백에 신경 쓰지 않는다고 가정하면 Internet Explorer의 단점을 해결하는 더 간결한 방법이 있습니다.

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

+1 익명 함수로 코드를 작성하고 있으므로 콘솔을 이와 같은 변수에 배치하는 것이 가장 좋은 해결책입니다. 다른 라이브러리에서 진행중인 다른 콘솔 연결을 방해하지 않도록 도와줍니다.
코드 루스

2
개발자 도구가 열리 자마자 로깅을 시작하려고합니다. 이 솔루션을 수명이 긴 범위에두면 (예 : 내부 함수를 콜백으로 등록) 자동 폴백을 계속 사용합니다.
Beni Cherniavsky-Paskin

+ 1 / -1 = 0 : +1 솔루션은 console.logs가 IE에서 사이트를 손상시키지 못하도록 방지하는 데 기반을 두어야하므로 디버그에 사용되지 않습니다 ... 디버그하려면 f12 키를 누르고 콘솔을 엽니 다. ) -1 덮어 쓰기 전에 콘솔이 있는지 확인해야하기 때문에 -1입니다.
1nfiniti

일부 IE 플러그인은 console 및 console.log를 정의하지만 기능이 아닌 빈 객체로 정의합니다.
Lilith River

24

"orange80"에 의해 게시 된 접근 방식이 정말 마음에 듭니다. 한 번 설정하고 잊을 수 있기 때문에 우아합니다.

다른 접근 방식은 문제를 요구하는 다른 무언가를 수행해야합니다 ( console.log()매번 평소 이외의 것을 호출하십시오 ).

로깅하기 전의 어느 위치에서나 자바 스크립트의 시작 부분에서 한 번만 호출 할 수있는 유틸리티 함수로 코드를 래핑하여 한 단계 더 발전했습니다. (저는 회사의 이벤트 데이터 라우터 제품에 이것을 설치하고 있습니다. 새로운 관리자 인터페이스의 브라우저 간 디자인을 단순화하는 데 도움이됩니다.)

/**
 * 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에서 실패한 고객의 브라우저에서 사이트가 중단되지 않습니다. 전에 저를 구 했어요! 니스 개선, BTW :-)
jpswain

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에 맵핑해야합니다 (사용 가능한 경우).
Ben

3

답변이 너무 많습니다. 이것에 대한 나의 해결책은 다음과 같습니다.

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

즉, console.log가 없거나이 경우에는 열리지 않은 경우 전역 네임 스페이스 Array에 로그를 저장하십시오. 이 방법으로 수백만 개의 경고를받지 않아도 개발자 콘솔을 열거 나 닫은 상태에서 로그를 볼 수 있습니다.


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

window.console.log()IE8에서 사용할 수 없을 때도 가능 하다고 말하고 console.log()있습니까?
LarsH

여기서 문제는 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

위에서 Walter의 접근 방식을 사용하고 있습니다 ( 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

6
Mister Lucky가 지적했듯이 "console.log는 개발자 도구를 연 후에 만 ​​사용할 수 있습니다 (F12를 열고 닫을 수 있도록 전환)."
소음기

0

나는이 방법을 좋아한다 (jquery의 doc ready 사용) ... 즉, 심지어 콘솔에서도 사용할 수 있습니다.

모든 기능을 고려하면 더 날씬해 질 수 있지만 로그 만 사용하므로 이것이 내가하는 일입니다.

//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메서드 가 없습니다 .
Nishi

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.