It’s 2022, Please Don’t Just Use “console.log” Anymore

console을 실용적으로 사용하기 위한 팁!!

 

1-1. console.log()  

console.log를 자주 사용하다보면 인쇄되는 정보의 양이 많아지고, 정보가 직관적이지 않게 된다. 개체를 넣는다면 출력되는 정보를 명확하게 볼 수 있다.

 

1-2. CSS스타일

2. console.warn()

콘솔이 많은 정보를 출력할 때, 우리가 원하는 것을 정확히 찾기가 쉽지 않다.

원하는 부분에 console.warn을 사용한다면 노란색 경고아이콘이 우리에게 친절한 이정표가 될 것이다.

 

3. console.error()

HTTP 요청을 보냈을때, 에러 핸들링에 있어서 무의식적으로 console.log를 사용하는 경우가 많다.

하지만 이런 에러 핸들링에 console.error() 를 사용한다면, 빨간색 경고아이콘과 함께 함수 호출의 관계를 출력해주기 때문에 에러를 잡는데 훨씬 유용할 수 있다.

 

4. console.time()&console.timeEnd()

코드의 실행 시간을 console.log(Date.now() - startTime) 과 같이 변수 설정을 통해 구하는 방법도 있다. 하지만 console.time이나 timeEnd를 flag와 함께 적절하게 사용한다면 이를 쉽게 할 수 있다.

 

5. console.table()

정보를 직관적으로 보기 위해 우리는 console.table을 이용해 간편하게 시각화 할 수 있다.

 

6. console.dir()

전체요소를 출력해준다. 함수(객체)도 마찬가지로 전체를 출력해준다.

---

Reference

 

https://javascript.plainenglish.io/its-2022-please-don-t-just-use-console-log-anymore-217638337c7d

It’s 2022, Please Don’t Just Use “console.log” Anymore