console.log

Console.log

내가 사용 하는 console.log 개발 스타일에 대해 개선하고자 정리하고자 한다.

console.log 는 내가 개발 중인 프로세스의 구조 나 정합성을 확인 하기 위해 사용한다. 

빨리 확인 하고 싶은 마음에 내가 실제 사용하는 코드이다.

console.log(변수명1);
console.log(변수명2); // 연속

console.log(this);
console.dir(this); // 객체의 구조를 자세히 보고 싶을 때 활용

console.log('------------'); // log 를 많이 찍어 구간을 확인 하기 위한 방법

• 없어 보이기도 하고
• 산재되어 지저분해 보이기도 하고 혼동되고
• 어디에서 출력했는지 이해하기 위한 시간이 소요 된다.

이런 습관을 고치고 싶어 포맷을 정리 해본다. (내가 지금 이거 할 때가 아닌데)

(() => {
 let foo = 'literal foo';
 let bar = 0;

 console.log(foo, bar); // literal foo 0
 console.log('%s, %d', foo, bar); // listeral foo, 0
 console.log(`${foo}, ${bar}`); // listeral foo, 0
})();

이외 실무에 활용할 수 있는 것을 정리 했다.

로그 레벨

console.warn(`${foo}, ${bar}`); // 노란색 경고 아이콘과 메시지 텍스트를 표시
console.error(`${foo}, ${bar}`); // 빨간색 아이콘과 빨간색 메시지 텍스트를 표시

실행시간측정

console.time();
console.timeEnd();

console.time("start");
console.timeEnd("start");

css

// css 적용 ( %c 는 css 의 약자, 두번째 매게변수에 css 정의
console.log('%c %s', 'color: red', `${foo}`);

assertion

console.assert(true == false, 'false');

메세지 그룹화

console.group();
console.groupEnd();

출처 : https://developers.google.com/web/tools/chrome-devtools/console