[javascript] console.log를 스타일리쉬하게

js로 개발하면서 debugging하는 수단 중 가장 심플한것이 console.log이다. 좀 더 스타일리쉬하게 사용해보자.

목적

console.log는 상당히 자주쓰지만, 결과물에 영향을 주는것이 아니라서 대충 쓸때가 많다. 하지만 console을 효과적으로 사용할 수 있다면, 디버깅이 좀 더 즐겁지 않을까 생각하여 정리하기로 했다.

console.log에 css 적용하기

아래와 같이 적용하면, css가 적용된 output이 나온다.

const style = "color: orangered; font-weight: bold"
console.log("%c%s%o", style, 'list: ' ,list);

string substitutions(아래 표)을 넘기는 것은 console의 기본 method이다.

expression	accept type
%c	css 값으로, string으로 넘겨줘야한다.
%s	string
%o	object

결론

지금은 위와 같이 고작 2줄이긴한데, 좀 더 화려하고? 선택지가 많도록 스타일을 조금씩 추가할 것이다.
사실 별거 아닌 작업이지만, 이것조차 귀찮아서 안쓰는게 console.log이기 때문에, 어느정도 규칙을 정해두는 것도 나쁘지 않은 것 같다.

추가 고찰할 내용

• 어떤 color들을 쓸 것인가? 규칙을 정할 것인가
• console의 다른 method (table, error) 같은곳에도 활용할 여지가 있는가?

참고

• MDN
• Chrome console API