[javascript] Chrome 자바 스크립트 콘솔에서 디버그 메시지를 어떻게 인쇄합니까?

Chrome 자바 스크립트 콘솔에서 디버그 메시지를 어떻게 인쇄합니까?

JavaScript 콘솔은 JavaScript 디버거와 동일하지 않습니다. AFAIK 구문이 다르기 때문에 JavaScript Debugger 의 인쇄 명령이 작동하지 않습니다. JavaScript 콘솔 print()에서 매개 변수를 프린터로 보냅니다.



답변

브라우저 주소 표시 줄에서 다음 코드를 실행합니다.

자바 스크립트 : console.log (2);

Chrome의 “JavaScript 콘솔”에 메시지를 성공적으로 인쇄합니다.


답변

Andru의 아이디어를 개선하여 콘솔 기능이 존재하지 않는 경우 콘솔 기능을 작성하는 스크립트를 작성할 수 있습니다.

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

그런 다음 다음 중 하나를 사용하십시오.

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

이 기능은 다양한 유형의 항목 (로그, 정보, 오류 또는 경고를 기준으로 필터링 할 수 있음)을 기록하며 콘솔을 사용할 수없는 경우 오류를 발생시키지 않습니다. 이 기능은 Firebug 및 Chrome 콘솔에서 작동합니다.


답변

많은 개발자가 놓친 멋진 기능을 추가하십시오.

console.log("this is %o, event is %o, host is %s", this, e, location.host);

이것은 마법 %o덤프 클릭과 깊은 검색 가능한 자바 스크립트 객체의 내용.%s레코드 용으로 만 표시되었습니다.

또한 이것은 시원합니다.

console.log("%s", new Error().stack);

new Error()호출 지점 ( 파일 경로 및 행 번호 포함)에 Java와 유사한 스택 추적을 제공합니다. ! 포함)에 .

모두 %onew Error().stack 크롬과 파이어 폭스에서 사용할 수 있습니다!

Firefox의 스택 추적에도 사용하십시오.

console.trace();

으로 https://developer.mozilla.org/en-US/docs/Web/API/console는 말한다.

행복한 해킹!

업데이트 : 일부 라이브러리는 나쁜 사람들이 작성하여 console자체 목적으로 객체를 재정의 합니다. console라이브러리를로드 한 후 원래 브라우저를 복원하려면 다음을 사용하십시오.

delete console.log;
delete console.warn;
....

스택 오버플로 질문 복원 console.log ()를 참조하십시오 .


답변

간단한 경고-모든 console.log ()를 제거하지 않고 Internet Explorer에서 테스트하려면 Firebug Lite 를 사용해야 합니다. 그렇지 않으면 특히 친숙하지 않은 오류가 발생합니다.

또는 false를 반환하는 자신의 console.log ()를 만듭니다.


답변

다음은 콘솔을 사용할 수 있는지 확인하는 간단한 스크립트입니다. 그렇지 않은 경우 Firebug 를로드하려고 시도하고 Firebug를 사용할 수없는 경우 Firebug Lite를로드합니다. 이제 console.log모든 브라우저에서 사용할 수 있습니다 . 즐겨!

if (!window['console']) {

    // Enable console
    if (window['loadFirebugConsole']) {
        window.loadFirebugConsole();
    }
    else {
        // No console, use Firebug Lite
        var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
            if (F.getElementById(b))
                return;
            E = F[i+'NS']&&F.documentElement.namespaceURI;
            E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
            E[r]('id', b);
            E[r]('src', I + g + T);
            E[r](b, u);
            (F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
            E = new Image;
            E[r]('src', I + L);
        };
        firebugLite(
            document, 'createElement', 'setAttribute', 'getElementsByTagName',
            'FirebugLite', '4', 'firebug-lite.js',
            'releases/lite/latest/skin/xp/sprite.png',
            'https://getfirebug.com/', '#startOpened');
    }
}
else {
    // Console is already available, no action needed.
}


답변

뿐만 아니라 Delan Azabani의 대답 , 난 내를 공유하고 console.js, 나는 같은 목적을 위해 사용합니다. 나는 함수 이름 배열을 사용하여 noop 콘솔을 만듭니다. 제 의견으로는이 작업을 수행하는 가장 편리한 방법은 무엇입니까? console.log하지만 기능 이있는 Internet Explorer를 관리 했지만 다음과 같은 기능 은 없습니다 console.debug.

// Create a noop console object if the browser doesn't provide one...
if (!window.console){
  window.console = {};
}

// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
  if (!window.console.debug && typeof window.console.log !== 'undefined') {
    window.console.debug = window.console.log;
  }
}

// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

for (var i = 0; i < names.length; ++i){
  if(!window.console[names[i]]){
    window.console[names[i]] = function() {};
  }
}


답변

또는이 기능을 사용하십시오 :

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}