console.log() JavaScript 디버깅 기술에 대한 자세한 설명_javascript 기술

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

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

window .console.log("Sample log");

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

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

console.log("Sample log");

console.log()는 모든 문자열을 허용할 수 있습니다. , 숫자 및 JavaScript 개체. Alert() 함수와 유사하게 console.log()는 개행 문자 n과 탭 문자도 허용할 수 있습니다. console.log() 문에 의해 출력된 디버깅 정보는 브라우저의 디버깅 콘솔에서 볼 수 있습니다. console.log()의 동작은 브라우저마다 다를 수 있습니다. 이 문서에서는 주로 Firebug의 console.log() 사용에 대해 설명합니다.
2. 디버깅 콘솔이 없는 브라우저와 호환
디버깅 콘솔이 없는 구형 브라우저의 경우 창에 콘솔 개체가 없으므로 console.log() 문을 직접 사용할 수 있습니다. 브라우저 내에서 오류(널 포인터 오류)가 발생하고 결국 일부 오래된 브라우저가 중단될 수 있습니다. 이 문제를 해결하려면 콘솔 객체를 수동으로 정의하고 콘솔 객체의 로그 함수를 빈 함수로 선언하면 됩니다. console.log() 문이 실행될 때 이러한 이전 버전의 브라우저는 아무것도 하지 마세요:

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

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

그러나 대부분의 경우 이러한 호환성 작업을 수행할 필요는 없습니다. console.log와 같은 코드 디버깅 ()는 최종 제품에서 제거되어야 합니다. 코드에서 제거되었습니다.
3. 매개변수 사용
alert() 함수와 유사하게 console.log()도 변수를 허용하고 이를 다른 문자열과 연결할 수 있습니다.

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

//변수 사용
var name = "Bob";
console.log(" 이름은 다음과 같습니다. " name);

alert() 함수와 달리 console.log()는 변수를 매개변수로 허용하고 이를 문자열로 전달할 수도 있습니다. 구체적인 구문은 다음의 printf 구문과 동일합니다. C 언어. 일관성:

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

//매개변수 사용
var people = "Alex" ;
var year = 42;
console.log("%s is %d살입니다.", people, year);

위 실행 결과 코드는 다음과 같습니다. "Alex는 42세입니다."
4. 다른 로그 수준 사용
console.log() 외에도 Firebug는 디버그, 로그, 로그 등 다양한 로그 수준도 지원합니다. 정보, 경고, 오류. 다음 코드는 콘솔의 다양한 로그 수준에 대한 정보를 인쇄합니다.

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

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

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