모던브라우저(크롬,파이어폭스 등) console 사용 방법

웹 개발시 브라우저 개발자 도구로 디버깅을 많이 하며,

그 중 console.log() 가 대표적인 기능이다.

 

하지만, console 에는 더 많은 기능들이 있어서 정리해보았다.

이 문서에서는 개발자도구 언어를 한국어 설정으로, output 예시가 좀 어색한 부분도 있으니 참고하기 바란다.

 

변수명과 값을 같이 출력하기 :: console.log({ 변수 Or object });

/*
 변수명과 값을 같이 출력하기
 console.log({변수명});
*/

var width = 100;
var height = 200;
console.log(width);
console.log(height);

console.log({width});
console.log({height});

// output:
// 100
// 200
// {width: 100}
// {height: 200}

 

조건에 따른 메시지 출력하기 :: console.assert( 조건 , 출력값 );

/*
 * 조건에 따라 출력하기
 * 조건이 거짓(false) 인 경우 출력한다.
 * 일부 브라우저는 지원을 안할 수 있다.
 *
 * console.assert( 조건 , 출력값 );
 */
 
for (let number = 2; number <= 5; number += 1) {
    console.log('the # is ' + number);
    console.assert(number % 2 === 0, {number: number, errorMsg: `숫자 ${number} 은 홀수이다`});
    
    // 또는 ES2015 에선 짧은 표현 가능
    let errorMsg = `ES2015 :: 숫자 ${number} 은 홀수이다`;
    console.assert(number % 2 === 0, {number, errorMsg});
}
// output : 
// 어설션에 실패함: {number: 3, errorMsg: '숫자 3 은 홀수이다'}
// 어설션에 실패함: {number: 3, errorMsg: 'ES2015 :: 숫자 3 은 홀수이다'}
// the # is 4                                          
// the # is 5                                          
// 어설션에 실패함: {number: 5, errorMsg: '숫자 5 은 홀수이다'}
// 어설션에 실패함: {number: 5, errorMsg: 'ES2015 :: 숫자 5 은 홀수이다'}

 

메시지 종류 구분하기 :: console.info() , console.debug() , console.warn() , console.error()

개발자 도구 console 창에 표시도 다르게 나올뿐 아니라 종류별(로그 수준) 필터 검색이 가능합니다.

/*
 * 정보 출력
 * console.info(출력값);
 *
 * 주의 출력
 * console.warn(출력값);
 *
 * 에러 출력
 * console.error(출력값);
 */

console.info("정보 메시지");
console.warn("주의 메시지");
console.error("에러 메시지");

스택 추적(종료 지점) 하기 :: console.trace()

console.trace()를 호출한 시점까지 스택을 추적합니다. 즉, 호출된 함수의 경로를 확인 할 수 있습니다.

/*
 * 호출 스택 추적하기
 * trace() 실행한 시점까지 경로(호출 지점)을 출력합니다.
 *
 * 출력 값은 trace() 실행 지점의 역순입니다.
 * 아래 예제로 보면, trace() 실행 지점이 third 함수 이므로
 * third -> second -> first 순으로 출력됩니다.
 */
 
function first() {
 second();
}
	
function second() {
 third();
}
	
function third() {
 console.trace();
}

first();

// output:
// third
// second
// first
// (익명)

메시지 그룹화하기 :: console.group(그룹명); console.groupEnd(그룹명);

기록할 내용이 많은 경우 그룹을 지정하여, 접는 형태로 출력할 수 있다.

/*
 * 메시지를 그룹화하여 출력하기
 *
 * 아래와 같이 group과 groupEnd 사이에 메시지를 작성한다.
 * console.group(그룹명);
 * -- 출력할 메시지 넣기
 * console.groupEnd(그룹명);
 * 그룹명은 생략 가능하다.
 *
 * group 과 groupEnd 가 쌍을 이루어야 하며,
 * 사이에 새로운 하위 group 을 추가할 수 있다.
 *
 * test console group
 *    └ level 1-1 group
 *    └ level 1-2 group
 *        └ level 2 group
 *    └ level 1-3 group
 * 아래 소스는 위와 같은 트리 구조의 메시지 그룹을 만든 예시이다.
 */

console.group("test console group");//최상위 그룹 시작

console.group("level 1-1 group"); //1 Depth 하위 그룹 시작
console.log("--- level 1-1 log area ---");
console.groupEnd("level 1-1 group");//하위 그룹 종료

console.group("level 1-2 group");//1 Depth 하위 그룹 시작
console.log("--- level 1-2 log area ---");

console.group("level 2 group");//2 Depth 하위 그룹 시작
console.log("--- level 2 log area ---");
console.groupEnd("level 2 group");//2 Depth 하위 그룹 종료

console.groupEnd("level 1-2 group");//하위 그룹 종료

console.group("level 1-3 group");//1 Depth 하위 그룹 시작
console.log("--- level 1-3 log area ---");
console.groupEnd("level 1-3 group");//하위 그룹 종료

console.groupEnd("test console group");//최상위 그룹 종료

 

console group 실행 화면

정보를 테이블 형태로 출력하기 :: console.table( 배열,오브젝트,객체배열);

많은 정보를 로그로 표시하려면 정보를 읽는 것이 어려워질 수 있다.

console.table() 은 콘솔에 배열 같은 데이터를 테이블로 표시하며 원하는 속성 배열을 지정해 표시할 데이터를 필터링할 수 있다.

/*
 * object table 출력하기
 */
 
let content = document.querySelectorAll("div");
//object 전체 table 출력
console.table( content );

object 전체 table 출력 결과

/*
 * object 에 특정 항목(property) table 출력하기
 */
 
let content = document.querySelectorAll("div");

//nodeName, offsetWidth, offsetHeight 항목(property)만 출력하기
console.table(content, ["nodeName", "offsetWidth", "offsetHeight"]);

object의 특정 항목(property) 출력 결과

/*
 * 여러 object를 table 로 출력하기
 */

function Person(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

//john, jane, emily object를 모두 출력하기
console.table([john, jane, emily]);

그 외 console API

위에서 언급한 기능 외에도 console API 는 더 많은 기능을 제공한다.

• count() , countReset()
• dir(), dirxml()
• time() , timeEnd() , timeLog()
• 등등

자세한 사항은 아래 MDN 공식 문서를 참고한다.

https://developer.mozilla.org/ko/docs/Web/API/Console

console - Web API | MDN