console.log : 우리가 모르는 유용한 기능들

대부분의 개발자들은 console.log 를 사용해서 특정 값을 확인하고 디버깅 합니다. 

그런데, console 에는 console.log 말고도 여러 메소드가 있다는걸 알고 계시나요?

아래 예를 보겠습니다.

각 로그들은 서로 다른 방식으로 표현되기 때문에 쉽게 구분할 수 있습니다. (스타일은 브라우저 마다 다릅니다.)

또한, 보다 구조적이고 가독성을 높일 수 있게 그룹으로 묶을 수 있습니다.

그룹은 중첩으로 표기할 수 있습니다.

그룹을 축소된 상태로 표시하려면 console.groupCollapsed() 를 사용하세요.

성능 측정

코드 지점간 시간을 측정하면 특정 작업의 성능을 쉽게 확인할 수 있습니다.

보통 이런 방법을 사용하시나요?

좀 더 우아하게 표현 해볼까요?

코드는 더 짧고, 측정은 더 정확하며, 한 페이지에서 최대 1만개의 다른 타이머를 동시에 추적할 수 있습니다.

서식문자를 활용한 치환

서식문자를 우선 알아보면,

숫자 : %d

문자 : %s

객체 : %o 입니다. 이를 활용해서 로그를 출력해보겠습니다.

참 쉽쥬?

스타일링

앞서 console 의 메소드에 따라 디폴트 스타일이 다르다는 것을 알아보았습니다.

놀랍게도 사용자 입맛에 따라 스타일을 다르게 주는 방법도 존재합니다. 익숙한 CSS로 말이죠.

%c 서식문자를 사용해서 CSS 방식으로 작성된 스타일을 다음 인수로 전달해주면 됩니다.

신기합니다!

더 자세한 내용을 확인하고 싶으시면 아래의 링크들을 참고해주세요.

https://developers.google.com/web/tools/chrome-devtools/console/console-write?hl=ko

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