Js의 콘솔 개체를 사용하여 콘솔에 디버깅 정보를 인쇄하여 Js 구현을 테스트합니다.

우연히 바이두를 열 때 F12를 눌렀는데, 콘솔에 바이두의 채용 광고가 출력되는 걸 보고 기분이 너무 좋아져서 이런 블로그 글이 떠올랐습니다.

이렇게 콘솔에 정보를 출력할 수 있기 때문에 앞으로 Js를 디버깅할 때 많은 수고를 덜 수 있지 않을까요? 다른 사람의 오해를 피하기 위해 특별히 for(var i in console)을 사용하여 다양한 브라우저 콘솔의 콘솔 지원을 확인했습니다.

결과는 다음과 같습니다.

IE 11 콘솔

로그, 정보, 경고, 오류, 디버그, 주장, 시간, timeEnd, 그룹, groupCollapsed, groupEnd, 추적, 지우기, dir, dirxml, count, countReset, cd, 선택, 프로필, profileEnd

방화범 콘솔

로그 , 디버그 , 정보 , 경고 , 예외 , 어설션 , dir , dirxml , 추적 , 그룹 , groupCollapsed , groupEnd , 프로필 , profileEnd , 카운트 , 클리어 , 시간 , timeEnd , timeStamp , 테이블 , 오류

Chrome 콘솔

memory , _commandLineAPI , debug , error , info , log , warning , dir , dirxml , table , Trace ,assert , count , markTimeline , profile , profileEnd , time , timeEnd, timeStamp, timeline, timelineEnd, group, groupCollapsed, groupEnd,clear

위에서 테스트한 브라우저는 log, info, warning, error, debug 5가지 기본 메서드를 지원하는 것을 볼 수 있습니다. 11, 다른 버전은 테스트하지 않았으며 Firefox 자체에는 콘솔이 없습니다. Firebug 플러그인을 로드하고 콘솔로 시작해야 합니다. 그렇지 않으면 Js가 오류를 보고합니다. 보다 편리하게 사용하시려면 직접 캡슐화하여 브라우저의 콘솔 지원 여부를 확인해 보시기 바랍니다. 지원하지 않는 경우에는 원래의 경고나 다른 방법만 사용하시면 됩니다.

간단한 사용법:

console.log("로그 정보");
console.info("일반 정보");
console.debug("디버그 정보") ;
console.warn("경고 프롬프트");
console.error("오류 프롬프트");

형식화된 출력:

console.log("%d 연도 %d 월 %d 일", 2014, 5, 20);//날짜 형식 출력
console.log('%c 컬러 출력 정보', 'color:white; background-color:#0055CC' );/ /출력 형식

출력 변수:

var who= 'you';
console.log('출력 변수 We support ', you);// 변수 읽기

출력 배열:

var arr = [1, 2, 3, 4, 5];
console.log('array:', arr) ;//출력 배열