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

사용은 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 체인 내부를 쉽게 확인할 수 있습니다.

console.log jQuery와 관련이 없습니다.

Firebug와 같은 디버깅 콘솔에 메시지를 기록합니다.

혼란스러운 점은 console.log를 사용하여 객체 중 하나의 내용과 함께 문자 메시지를 기록하려면 두 가지 중 하나를 다른 인수로 전달해야한다는 것입니다. 즉, + 연산자를 사용하여 출력을 연결하는 경우 암시 적으로 다음을 호출하므로 쉼표로 구분해야합니다..toString() 객체 메서드를 해야합니다. 대부분의 경우 명시 적으로 재정의 Object되지 않으며 상속 된 기본 구현 은 유용한 정보를 제공하지 않습니다.

콘솔에서 시도하는 예 :

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

반면 정보 텍스트 메시지와 객체의 내용을 연결하려고하면 다음과 같은 결과가 나타납니다.

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

따라서 console.log는 실제로 원하는만큼 많은 인수를 취합니다.

사용하다 console.log페이지에 디버깅 정보를 추가하는 데 합니다.

많은 사람들 alert(hasNinjas)이이 목적으로 사용하지만console.log(hasNinjas) 작업하기가 더 쉽습니다. 경고 팝업을 사용하면 사용자 인터페이스를 차단하는 모달 대화 상자가 나타납니다.

편집 : Baptiste Pernet 및 Jan Hančič에 동의 window.console합니다. 사용 가능한 콘솔이 없으면 코드가 손상되지 않도록 먼저 정의 되어 있는지 확인하는 것이 좋습니다 .

예를 들어-프로그램을 실행할 수있는 코드 줄을 알고 싶다고 가정하고 (파산하기 전에) 간단히 입력하십시오.

console.log("You made it to line 26. But then something went very, very wrong.")

Firefox 용 Firebug 또는 WebKit 브라우저의 JavaScript 콘솔에서 JavaScript 코드를 디버깅하는 데 사용 합니다.

var variable;

console.log(variable);

변수가 배열이나 객체 인 경우에도 변수의 내용을 표시합니다.

그것은 유사하다 print_r($var);위한 PHP .

주의 : 프로덕션 코드에서 콘솔을 호출하면 Internet Explorer에서 사이트가 중단 될 수 있습니다. 포장을 풀지 마십시오. 참조 : https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

초기에 JS 디버깅은 alert()기능을 통해 수행 되었으나 이제는 사용되지 않습니다.

는 console.log()같은 디버깅 콘솔에 로그온 메시지 기록하는 기능이다 웹킷 또는 방화범. 브라우저에서는 화면에 아무것도 보이지 않습니다. 디버깅 콘솔에 메시지를 기록합니다. Firebug가 포함 된 Firefox 및 웹킷 기반 브라우저 (Chrome 및 Safari)에서만 사용할 수 있습니다. 모든 IE 릴리스에서 제대로 작동하지는 않습니다 .

콘솔 객체는 DOM의 확장입니다.

은 console.log()단지 개발 및 디버깅하는 동안 코드에 사용되어야한다.

누군가 console.log()프로덕션 서버의 javascript 파일에 남겨 두는 것은 나쁜 습관으로 간주됩니다 .

브라우저가 디버깅을 지원하는 경우 console.log () 메소드를 사용하여 JavaScript 값을 표시 할 수 있습니다.

로 브라우저에서 디버깅을 활성화 F12하고 디버거 메뉴에서 "콘솔"을 선택하십시오.

JavaScript 콘솔. 작동하지 않는 JavaScript 프로그램을 수정하거나 "디버그"하고 console.log () 명령을 사용하여 연습하십시오. 사용중인 브라우저를 기반으로 JavaScript 콘솔에 액세스하는 데 도움이되는 바로 가기가 있습니다.

Chrome 콘솔 키보드 단축키

Windows : Ctrl+ Shift+ J
Mac : Cmd+ Option+J

Firefox 콘솔 키보드 단축키

Windows : Ctrl+ Shift+ K
Mac : Cmd+ Option+K

Internet Explorer 콘솔 키보드 바로 가기

F12 키

Safari 콘솔 키보드 단축키

Cmd+ Option+C

console.log특히 개발자가 코드가 무엇을하고 있는지를 눈에 띄지 않게 알리는 코드를 작성하는 방법입니다. 문제가 있음을 경고하는 데 사용할 수 있지만 코드를 디버깅 할 때 대화식 디버거를 대신해서는 안됩니다. 비동기 특성은 기록 된 값을 의미합니다. 이 메소드가 호출 될 때 반드시 값을 나타내는 것은 아니라는 .

간단히 말해서 console.log(사용 가능한 경우)로 오류를 기록한 다음 선택한 디버거를 사용하여 오류를 수정하십시오 : Firebug , WebKit 개발자 도구 ( Safari 및 Chrome 에 내장 ), IE 개발자 도구 또는 Visual Studio.

console.log디버깅을 시작할 때 웹 프로그래밍이 쉽다고 느낍니다 .

var i;

i런타임 값을 확인하려면 ..

console.log(i);

iFirebug의 콘솔 탭에서 현재 값을 확인할 수 있습니다 . 디버깅에 특별히 사용됩니다.

Firebug 콘솔 에 로그를 전달하는 데 사용 됩니다. 주요 사용법은 JavaScript 코드를 디버깅하는 것입니다.

위에서 언급 한 사용법 외에도에서 console.log터미널로 인쇄 할 수도 있습니다 node.js. 예를 들어, express로 작성된 서버 console.log는 출력 로거 파일에 쓰는 데 사용할 수 있습니다 .

자바 스크립트에는 입력 및 출력 기능이 없습니다. 따라서 코드를 디버그하려면 console.log () 메소드가 사용되며 로깅을위한 메소드입니다. 콘솔 로그 (개발 도구)에 인쇄됩니다.

IE 개발 도구를 열 때까지는 IE8과 그 아래에 없습니다.

이것은 jQuery와 관련이 없습니다. 는 console.log()브라우저의 콘솔에 정보를 기록하는 방법을 제공하는 콘솔 오브젝트의 로그 함수로 참조된다. 이러한 방법은 디버깅 목적으로 만 사용되며 최종 사용자에게 정보를 제공하는 데 의존해서는 안됩니다.