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

console.log() 또는 기타 로그 수준 콘솔 출력 함수를 사용하는 경우 로그 출력에는 계층적 관계가 없습니다. 프로그램에 로그 출력량이 많을 경우 이러한 제한으로 인해 많은 문제가 발생하게 됩니다. 이 문제를 해결하려면 console.group()을 사용할 수 있습니다. 다음 코드를 예로 들어 보겠습니다.

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

함수 doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
console.log("작업 1단계가 완료되었습니다.");
doSubTaskB(10000);
console.log("작업 2단계가 완료되었습니다.");
doSubTaskC(1000,10000);
console.log("작업 3단계가 완료되었습니다.");
}
함수 doSubTaskA(count){
console.log("하위 작업 A 시작 중");
for(var i=0;i }

함수 doSubTaskB(count){
console.log("하위 작업 B 시작 중");
for(var i=0;i }

함수 doSubTaskC(countX,countY){
console.log("하위 작업 C 시작 중");
for(var i=0;i for(var j=0;j }
}

doTask();

Firebug 콘솔의 출력은 다음과 같습니다.

보시다시피 특정 계층 관계를 가져야 하는 로그 출력 표시에는 차이가 없습니다. 계층적 관계를 추가하려면 로그 출력을 그룹화하고 그룹화 시작 부분에 console.group()을 삽입하고 그룹화 끝에 console.groupEnd()를 삽입하면 됩니다.

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

함수 doTask(){
console.group("작업 ​​그룹");
doSubTaskA(1000);
doSubTaskA(100000);
console.log("작업 1단계가 완료되었습니다.");
doSubTaskB(10000);
console.log("작업 2단계가 완료되었습니다.");
doSubTaskC(1000,10000);
console.log("작업 3단계가 완료되었습니다.");
console.groupEnd();
}
함수 doSubTaskA(count){
console.group("하위 작업 A 그룹");
console.log("하위 작업 A 시작 중");
for(var i=0;i console.groupEnd();
}

함수 doSubTaskB(count){
console.group("하위 작업 B 그룹");
console.log("하위 작업 B 시작 중");
for(var i=0;i console.groupEnd();
}

함수 doSubTaskC(countX,countY){
console.group("하위 작업 C 그룹");
console.log("하위 작업 C 시작 중");
for(var i=0;i for(var j=0;j }
console.groupEnd();
}

doTask();

console.group() 문을 삽입한 후 Firebug 콘솔의 출력은 다음과 같습니다.

브라우저 지원

console.log()와 마찬가지로 Console.group()은 디버깅 도구가 있는 브라우저에서 더 잘 지원됩니다.