JavaScript : 오류 콘솔에 메시지를 어떻게 인쇄합니까?


답변:


469

Firebug를 설치 하면 console.log(...)and console.debug(...)등을 사용할 수 있습니다 (자세한 내용 은 설명서 참조).


14
@Dan : WebKit Web Inspector는 FireBug 콘솔 API도 지원합니다
olliej

160
이것이 왜 대답입니까? 그는 firebug 콘솔에 쓰는 방법을 묻지 않고 오류 콘솔에 쓰는 방법을 물었습니다. 거시기 나 다른 것이 아니라 단지 지적하는 것입니다.
matt lohkamp

127
+1. 그리고이 질문에 지금 도착한 사람의 이익을 위해, 질문에 대한 답변이 있기 때문에 모든 브라우저가 이제 콘솔 객체를 구현했기 때문에 console.log()IE를 포함한 모든 브라우저에서 작동해야한다는 것을 지적 할 가치가 있습니다. 그러나 모든 경우에 당시에는 디버거 창이 열려 있어야합니다. 그렇지 않으면 호출하면 console오류가 발생합니다.
Spudley

2
앞에서 언급했듯이 @andrewjackson은 console.log가 IE를 포함한 모든 최신 브라우저에서 잘 작동합니다. 오래된 브라우저를 지원하려는 경우 (그리고 공개 웹 사이트에서 작업하는 경우에도 확실하게!) 코드는 여전히 유효하고 유용합니다.하지만 내 비판은 귀하의 의견이 오도 / 정확하지 않다는 것입니다.
BrainSlugs83

1
반면에 console.debug ()는 IE에 존재하지 않습니다. if (! console.debug) {console.debug = function (args) {console.log (args); }}
Rovanion

318
console.error(message); //gives you the red errormessage
console.log(message); //gives the default message
console.warn(message); //gives the warn message with the exclamation mark in front of it
console.info(message); //gives an info message with an 'i' in front of the message

로깅 메시지에 CSS를 추가 할 수도 있습니다.

console.log('%c My message here', "background: blue; color: white; padding-left:10px;");


10
이것이 정답입니다. "오류"라는 단어는 선택한 답변에 언급되지 않았지만 질문 제목에 있습니다.
Ivan Durst

3
CSS 추가에 대한 추가 내용은 꽤 재미있다. +1!
sudo는 0

@ORMapper 거기에서 작동하지 않는 것은 무엇입니까? 내가 생각하는 CSS?
Nicholas

2
당신이 실현하는 순간, console.log당신이 사용 하는이 모든 년 동안 콘솔 내에서 CSS를 사용할 수 있습니다 : |
Red

86

JavaScript 콘솔에는 예외가 기록됩니다. Firebug를 사용하지 않으려면 사용할 수 있습니다 .

function log(msg) {
    setTimeout(function() {
        throw new Error(msg);
    }, 0);
}

용법:

log('Hello World');
log('another message');

8
일부 브라우저에서 디버깅이 활성화 된 경우 팝업 메시지가 표시됩니다.
BrainSlugs83

throw포장 해야하는지 설명해 주 setTimeout시겠습니까?
Antony

55

브라우저 간 작동하는이 작업을 수행하는 좋은 방법 중 하나는 JavaScript 디버깅 : 경고를 버리십시오! .


7
throw ()는 훌륭한 제안입니다. 이것은 선택된 답변이어야합니다.
matt lohkamp

17
동의, 이것은 하나의 브라우저 간 접근 방식입니다. 그러나 .. 예외를 던지는 것은 메시지 로깅과 근본적으로 다르지 않습니까?
Robin Maben

14
반면에 예외를 던지면 현재 "스레드"(Yuval A에서 언급 한대로)의 실행이 중지되고 예외가 있으면 캐치에서 다시 시작됩니다. 이것이 바람직한 것인지 의심합니다.
dlaliberte

7
throw()확실히이 방법이 아닙니다. 조만간 문제가 생길 것입니다. 나를 위해 그것은 더 빨랐다 :(
Hugo Mota

4
@ Ian_Oxley : 어느 시점에 다운되었지만 이제는 백업되었지만 여기에 코드를 게시하는 것이 더 좋으며 stackoverflow 모범 사례에서 권장합니다.
woohoo

15

다음은 디버거 콘솔이 아닌 브라우저의 오류 콘솔에 메시지를 인쇄하는 방법에 대한 문자적인 질문에 대한 해결책입니다. 디버거를 우회해야 할 이유가있을 수 있습니다.

오류 콘솔에서 메시지를 가져 오기 위해 오류를 발생시키는 제안에 대한 의견에서 언급했듯이 한 가지 문제는 이것이 실행 스레드를 중단한다는 것입니다. 스레드를 중단하지 않으려면 setTimeout을 사용하여 생성 된 별도의 스레드에서 오류를 발생시킬 수 있습니다. 따라서 내 솔루션 (Ivo Danihelka의 솔루션으로 정교화 됨) :

var startTime = (new Date()).getTime();
function logError(msg)
{
  var milliseconds = (new Date()).getTime() - startTime;
  window.setTimeout(function () {
    throw( new Error(milliseconds + ': ' + msg, "") );
  });
}
logError('testing');

시간 초과로 인해 메시지가 표시되는 순서가 왜곡 될 수 있으므로 시작 시간 이후의 시간 (밀리 초)을 포함합니다.

Error 메서드에 대한 두 번째 인수는 파일 이름에 대한 것입니다. 여기서는 쓸모없는 파일 이름과 줄 번호가 출력되지 않도록 빈 문자열입니다. 호출자 기능을 얻을 수 있지만 간단한 브라우저 독립적 인 방식으로는 불가능합니다.

오류 아이콘 대신 경고 또는 메시지 아이콘이있는 메시지를 표시 할 수 있으면 좋을 것입니다. 그러나 그 방법을 찾을 수 없습니다.

throw를 사용할 때의 또 다른 문제점은 둘러싼 try-catch에 의해 잡히고 버릴 수 있으며, 던지기를 별도의 스레드에두면 해당 장애물도 피할 수 있다는 것입니다. 그러나 window.onerror 핸들러가 다른 것을 수행하는 것으로 대체되는 경우 오류가 발생할 수있는 또 다른 방법이 있습니다. 거기 당신을 도울 수 없습니다.


15

Safari 를 사용 하면 쓸 수 있습니다

console.log("your message here");

브라우저의 콘솔에 바로 나타납니다.


11
모든 최신 브라우저가 지원 console.log()됩니다.
JJJ

2
모든 최신 브라우저는 이제 지원 console.log()합니다. 최근까지는 사실이 아니었다.
브라이스

9

실제로 질문에 대답하려면 :

console.error('An error occurred!');
console.error('An error occurred! ', 'My variable = ', myVar);
console.error('An error occurred! ' + 'My variable = ' + myVar);

오류 대신 정보, 로그 또는 경고를 사용할 수도 있습니다.


귀하의 답변이 가장 좋지만 Mozilla의 MDN 페이지console.error(..)비표준 기능이므로 프로덕션 환경에서는 사용해서는 안된다고 말합니다 . 이것에 대해 무엇을 취합니까? console.errorvs를 사용하는 초보자 프로그래머에게 제안 사항이 console.log있습니까?
modulitos

이것은 흥미 롭다. 우리는 이것을 사용해서는 안됩니다. 정보 주셔서 감사합니다, Lucas.
Yster

2
MDN은console.log(...) "비표준"으로 간주 됩니다. 이와 관련하여 console.error만큼 안정적 console.log입니다.
Mike Rapadas

1
@Lucas 누가 표준에 관심이 있습니까? 누가 프로덕션에 콘솔 로깅을 사용합니까?
Andrew

이제 모든 주요 브라우저에서 Console.error가 작동합니다. 심지어 IE8. 참조 developer.mozilla.org/en-US/docs/Web/API/Console/error
레드



5

위에서 언급 한 'throw ()'에 대한 참고 사항. 그것은 페이지의 실행을 완전히 멈추는 것 같습니다 (IE8에서 확인했습니다). "특정 변수 추적과 같은 진행중인 프로세스"에 로깅하는 데별로 유용하지 않습니다.

내 제안은 아마도 문서의 어딘가에 textarea 요소 를 추가하고 필요할 때마다 정보를 기록하기 위해 을 변경하거나 텍스트에 추가 하는 것입니다 ...


OP의 질문에 대답하지 않았기 때문입니다. JS 콘솔에 인쇄하려면, 당신은 같은 내장 방법을 사용해야합니다 console.log(), throw()등 또한,의 행동에 아무것도 잘못이 throw()당신이 암시하는 것 같은 -가 실행을 중지한다는 사실은 의도적 문서화 (이다 개발자. mozilla.org/en-US/docs/Web/JavaScript/Reference/… ) 및 다른 프로그래밍 언어에서 예외가 발생 / 포착되는 방식과 일치합니다. (만약 실행을 멈추지 않고 변수의 내용을 기록하고 싶다면 그것이 바로 그 일 console.log()입니다.)
Sean the Bean

@SeantheBean은 원래 IE가 지원하지 않는다는 사실에 대한 토론 console.log이 있었으므로 사람들은 대안을 제시했습니다. 정보 throw()실행을 중지 물론- 은 의도적이다, 아무도 그렇지 않은 말했다. 그렇기 때문에 일반적으로 런타임에 디버그 정보를 기록하는 좋은 방법이 아닌 이유 는 무엇입니까?
Yuval A.

5

항상 그렇듯이 Internet Explorer는 rollerskates의 큰 코끼리입니다 console.log().

jQuery의 로그 는 매우 쉽게 조정할 수 있지만 어디에나 추가해야하는 어려움이 있습니다. jQuery를 사용하는 경우 한 가지 해결책은 먼저 jQuery 파일에 넣는 것입니다.

function log()
{
    if (arguments.length > 0)
    {
        // Join for graceful degregation
        var args = (arguments.length > 1) ? Array.prototype.join.call(arguments, " ") : arguments[0];

        // This is the standard; Firebug and newer WebKit browsers support this.
        try {
            console.log(args);
            return true;
        } catch(e) {
            // Newer Opera browsers support posting erros to their consoles.
            try {
                opera.postError(args);
                return true;
            } 
            catch(e) 
            {
            }
        }

        // Catch all; a good old alert box.
        alert(args);
        return false;
    }
}

이제 jQuery의 확장으로 허용되지만 예외를 잡기 전에 'console'및 'opera'객체가 있는지 확인하는 것이 더 효율적이지 않습니까?
Danubian Sailor

@ lechlukasz 확장의 오버 헤드를 저장하고 console.log와 IE 검사를 사용할 수 있다고 생각합니다 : stackoverflow.com/questions/1215392/…
Chris S


3

function foo() {
  function bar() {
    console.trace("Tracing is Done here");
  }
  bar();
}

foo();

console.log(console); //to print console object
console.clear('console.clear'); //to clear console
console.log('console.log'); //to print log message
console.info('console.info'); //to print log message 
console.debug('console.debug'); //to debug message
console.warn('console.warn'); //to print Warning
console.error('console.error'); //to print Error
console.table(["car", "fruits", "color"]);//to print data in table structure
console.assert('console.assert'); //to print Error
console.dir({"name":"test"});//to print object
console.dirxml({"name":"test"});//to print object as xml formate

To Print Error:- console.error('x=%d', x);

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");


1
console.log("your message here");

나를 위해 일하고 있습니다. 나는 이것을 찾고 있습니다. 나는 Firefox를 사용했습니다. 여기 내 스크립트가 있습니다.

 $('document').ready(function() {
console.log('all images are loaded');
});

Firefox 및 Chrome에서 작동합니다.




0

콘솔로 인쇄되지는 않지만 일부 디버깅에 유용 할 수있는 메시지와 함께 경고 팝업이 열립니다.

그냥 해:

alert("message");

즉 영업 이익은 물어 무엇의 공통점이 아무것도
Zefir Zdravkov

0

es6 구문을 사용하면 다음을 사용할 수 있습니다.

console.log(`x = ${x}`);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.