JavaScript_javascript 기술의 console.log() 함수에 대한 자세한 소개

JavaScript 프로그램을 디버깅하는 경우 console.log()를 사용하는 것이 Alert()보다 더 나은 방법입니다. 그 이유는 다음과 같습니다. Alert() 함수는 JavaScript 프로그램의 실행을 차단하여 부작용과 console.log를 발생시킵니다. ()는 관련 정보만 콘솔에 출력하므로 비슷한 문제가 발생하지 않습니다.

console.log()란 무엇인가요?

매우 오래된 버전의 브라우저를 제외하고 오늘날 대부분의 브라우저에는 디버깅 기능이 내장되어 있지 않더라도 플러그인을 설치하여 보완할 수 있습니다. 예를 들어, 이전 버전의 Firefox에는 내장된 디버깅 도구가 없습니다. 이 경우 Firebug 플러그인을 설치하여 디버깅 기능을 추가할 수 있습니다. 디버깅 기능이 있는 브라우저에서는 console이라는 멤버 변수가 디버깅 도구의 콘솔을 참조하는 window 개체에 등록됩니다. 콘솔 객체의 log() 함수를 호출하여 콘솔에 정보를 출력할 수 있습니다. 예를 들어 다음 코드는 콘솔에 "샘플 로그"를 인쇄합니다.

코드 복사 코드는 다음과 같습니다.

window.console.log("샘플 로그");

위 코드는 창 개체를 무시하고 다음과 같이 직접 축약할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

console.log("샘플 로그");

console.log()는 모든 문자열, 숫자 및 JavaScript 객체를 허용할 수 있습니다. Alert() 함수와 유사하게 console.log()는 개행 문자 n과 탭 문자도 허용할 수 있습니다.

console.log() 문에 의해 출력된 디버깅 정보는 브라우저의 디버깅 콘솔에서 확인할 수 있습니다. 각 브라우저별 구체적인 보기 방법은 다음 웹페이지를 참조하세요.
http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it

console.log()의 동작은 브라우저에 따라 다를 수 있습니다. 이 문서에서는 주로 Firebug에서 console.log()의 사용을 설명합니다.

디버그 콘솔이 없는 브라우저와 호환

디버깅 콘솔이 없는 구형 브라우저의 경우 창에 콘솔 개체가 존재하지 않으므로 console.log() 문을 직접 사용하면 브라우저 내부에 오류(널 포인터 오류)가 발생할 수 있으며 결국 일부 구형 브라우저로 이어질 수 있습니다. 충돌. 이 문제를 해결하려면 콘솔 객체를 수동으로 정의하고 콘솔 객체의 로그 함수를 빈 함수로 선언하면 됩니다. console.log() 문이 실행될 때 이러한 이전 버전의 브라우저는 아무것도 하지 마세요:

코드 복사 코드는 다음과 같습니다.

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

그러나 대부분의 경우에는 이 호환성 작업을 수행할 필요가 없습니다. console.log()와 같은 디버깅 코드는 최종 프로덕션 코드에서 제거되어야 합니다.

매개변수 사용

alert() 함수와 유사하게 console.log()도 변수를 허용하고 이를 다른 문자열과 연결할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//변수 사용
변수 이름 = "Bob";
console.log("이름은 : " name);

Alert() 함수와 달리 console.log()는 변수를 매개변수로 허용하고 이를 문자열로 전달할 수도 있습니다. 해당 구문은 C 언어의 printf 구문과 일치합니다.

코드 복사 코드는 다음과 같습니다.

//매개변수 사용
var people = "알렉스";
var 연도 = 42;
console.log("%s은(는) %d살입니다.", people, year);

위 코드의 실행 결과는 "Alex is 42세입니다."

다른 로그 수준 사용

console.log() 외에도 Firebug는 디버그, 정보, 경고, 오류 등 다양한 로그 수준을 지원합니다. 다음 코드는 콘솔의 다양한 로그 수준에 대한 정보를 인쇄합니다.

코드 복사 코드는 다음과 같습니다.

//다른 로깅 수준 사용
console.log("로그 수준");
console.debug("디버그 수준");
console.info("정보 수준");
console.warn("경고 수준");
console.error("오류 수준");

Firebug 콘솔에서 볼 수 있듯이 다양한 로그 수준에 따라 인쇄된 정보의 색상과 아이콘이 동시에 다르므로 콘솔에서 다양한 로그 수준을 선택하여 이 정보를 필터링할 수 있습니다.