[javascript] console.log은 (는) 무엇 이죠?

JAVASCRIPT / 글쓴이

사용은 console.log무엇입니까?

코드 예제와 함께 JavaScript에서 사용하는 방법을 설명하십시오.

답변

jQuery 기능이 아니라 디버깅 목적의 기능입니다. 예를 들어 무언가가 발생하면 콘솔에 무언가를 기록 할 수 있습니다. 예를 들어 :

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

그러면 #someButton was clicked버튼을 클릭하면 Firebug의 “콘솔”탭 (또는 다른 도구의 콘솔 (예 : Chrome의 웹 검사기))에 표시됩니다.

어떤 이유로 콘솔 개체를 사용하지 못할 수 있습니다. 그런 다음 이것이 맞는지 확인할 수 있습니다. 프로덕션에 배포 할 때 디버깅 코드를 제거 할 필요가 없으므로 유용합니다.

if (window.console && window.console.log) {
  // console is available
}

답변

콘솔을 볼 수있는 장소! 하나의 답변으로 모든 것을 갖도록하십시오.

Firefox

http://getfirebug.com/

(이제 Firefox의 내장 개발자 도구 Ctrl + Shift + J (도구> 웹 개발자> 오류 콘솔)를 사용할 수 있지만 Firebug가 훨씬 좋습니다. Firebug를 사용하십시오)

사파리와 크롬

기본적으로 동일합니다.

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

인터넷 익스플로러

호환성 모드를 사용하여 IE9 또는 IE10에서 IE7 및 IE8을 디버깅 할 수 있음을 잊지 마십시오.

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

IE7의 IE6에서 콘솔에 액세스해야하는 경우 Firebug Lite 책갈피를 사용하십시오.

http://getfirebug.com/firebuglite/ 안정적인 북마크릿 찾기

http://en.wikipedia.org/wiki/Bookmarklet

오페라

http://www.opera.com/dragonfly/

iOS

모든 iPhone, iPod touch 및 iPad에서 작동합니다.

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

iOS 6에서는 기기를 연결하면 OS X의 Safari를 통해 콘솔을 볼 수 있습니다. 또는 에뮬레이터를 사용하여 Safari 브라우저 창을 열고 “개발”탭으로 이동하면됩니다. 여기에서 Safari 관리자가 장비와 통신 할 수있는 옵션이 있습니다.

윈도우 폰, 안드로이드

둘 다 콘솔이 내장되어 있고 북마크 기능이 없습니다. 따라서
http://jsconsole.com/ type : listen을 사용하면 HTML에 배치 할 스크립트 태그가 제공됩니다. 그때부터 jsconsole 웹 사이트에서 콘솔을 볼 수 있습니다.

iOS와 안드로이드

http://html.adobe.com/edge/inspect/ 를 사용하여 편리한 브라우저 플러그인을 사용하여 모든 장치에서 웹 관리자 도구 및 콘솔에 액세스 할 수 있습니다 .

오래된 브라우저 문제

코드에서 console.log를 사용하고 동시에 개발자 도구를 열지 않으면 이전 버전의 IE가 충돌합니다. 운 좋게도 쉽게 고칠 수 있습니다. 코드 상단에 아래 코드 스 니펫을 사용하십시오.

 if(!window.console){ window.console = {log: function(){} }; }

콘솔이 존재하는지 확인하고 그렇지 않으면 콘솔이라는 빈 함수를 가진 객체로 설정합니다 log. 이런 식으로 window.console 및 window.console.log는 절대 진정한undefined.

답변

Firebug와 같은 도구를 사용하여 코드를 검사하면 콘솔에 기록 된 모든 메시지를 볼 수 있습니다. 이 작업을 수행한다고 가정 해 봅시다.

console.log('Testing console');

Firebug (또는 코드를 검사하기 위해 사용하기로 결정한 도구)에서 콘솔에 액세스하면 로그 할 기능을 지시 한 메시지가 표시됩니다. 이것은 함수가 실행 중인지 또는 변수가 올바르게 전달 / 할당되는지를 확인할 때 특히 유용합니다. 실제로 코드에 무엇이 잘못되었는지 알아내는 데 실제로 가치가 있습니다.

답변

Firebug 또는 Developer Tools (Chrome / Safari)와 같은 브라우저의 자바 스크립트 콘솔에 로그 메시지를 게시하고 실행 된 행과 파일을 표시합니다.

또한 jQuery 객체를 출력하면 DOM에 해당 요소에 대한 참조가 포함되고 요소를 클릭하면 요소 / HTML 탭에서 해당 요소로 이동합니다.

다양한 방법을 사용할 수 있지만 Firefox에서 작동하려면 Firebug가 열려 있어야합니다. 그렇지 않으면 전체 페이지가 중단됩니다. 로깅하는 것이 변수, 배열, 객체 또는 DOM 요소인지 여부에 관계없이 객체의 프로토 타입을 포함하여 전체 고장을 제공합니다 (항상 찌르는 것이 흥미 롭습니다). 원하는 만큼 많은 인수를 포함 할 수 있으며 공백으로 대체됩니다.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

각 명령마다 다른 로고와 함께 표시됩니다.

또한 console.profile(profileName);함수, 스크립트 등의 프로파일 링을 시작 하는 데 사용할 수 있습니다 . 그런 다음이를 종료하면 console.profileEnd(profileName);Chrome의 프로필 탭에 표시됩니다 (FF로 알 수 없음).

자세한 내용은 http://getfirebug.com/logging 을 참조 하십시오. (추적, 그룹, 프로파일 링, 객체 검사).

도움이 되었기를 바랍니다!

답변

jQuery와는 아무런 관련이 없으며 사용하려는 경우 조언합니다.

if (window.console) {
    console.log("your message")
}

따라서 코드를 사용할 수 없을 때 코드를 깨지 마십시오.

주석에서 제안한 것처럼 한곳에서 실행 한 다음 console.log정상적으로 사용할 수 있습니다

if (!window.console) { window.console = { log: function(){} }; }

답변

console.logjQuery와 관련이 없습니다. 스크립트가 데이터 (또는 대부분의 경우 개체)를 JavaScript 콘솔에 기록 할 수 있도록하는 디버거 (Chrome 디버거 및 Firebug 포함)에서 제공하는 일반적인 개체 / 방법입니다.

답변

console.log일부 브라우저 (Firebug가 설치된 Firefox, Chrome, IE8, Firebug Lite가 설치된 것)에서 콘솔에 디버그 정보를 기록합니다. Firefox에서는 객체를 검사하거나 HTML 요소의 레이아웃 또는 기타 속성을 검사 할 수있는 매우 강력한 도구입니다. jQuery와 관련이 없지만 jQuery와 함께 사용할 때 일반적으로 수행되는 두 가지 작업이 있습니다.

  • Firebug 용 FireQuery 확장 프로그램을 설치하십시오 . 이것은 다른 장점들 중에서도 jQuery 객체의 로깅을 더보기 좋게 만듭니다.

  • jQuery의 체인 코드 규칙에 더 적합한 래퍼를 만듭니다.

이것은 일반적으로 다음과 같은 것을 의미합니다.

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

그런 다음 호출 할 수 있습니다

$('foo.bar').find(':baz').log().hide();

jQuery 체인 내부를 쉽게 확인할 수 있습니다.