Developer essentials: JavaScript console methods

https://developer.mozilla.org/en-US/blog/learn-javascript-console-methods/

Developer essentials: JavaScript console methods | MDN Blog

JavaScript로 개발할 때 console.log()는 반드시 쓰게 된다. 그동안 console.log, warning, info, error는 많이 써왔는데 이 글을 읽고 새로운 메소드들을 많이 발견했다!

 

---

 

레벨에 따른 로깅 

대부분 알겠지만 그냥 의미의 중요한 정도에 따른 로깅 레벨을 정리해본다. 

주로 console.log를 쓰겠지만 다른 것들을 쓰면 브라우저에 콘솔창에서 필터링해서 볼 수 있어서 분리해서 사용하기도 한다. 

 

1. console.info()
2. console.log()
3. console.warn()
   크롬 기준 노란색으로 출력돼서 눈에 잘 띈다.
4. console.error()
   크롬 기준 빨간색으로 출력돼서 눈에 잘 띈다. 

 

새로운 발견! console.table()

처음 발견한건데 굉장히 유용할 것 같다. 객체 타입의 데이터를 console.table()로 찍으면 테이블 형태로 출력된다.

이렇게 된다. 짱신기

 

새로운 발견!2 console.count()

vue에서 watch를 좀 멍청하게 써서 도대체 이게 언제 몇 번이나 실행되는지 확인하기 어려울 때가 있다 그때 여기에 카운트하는 변수를 넣어 처음 마운트 될 때 또는 어떤 동작이 수행될 때 몇 번 실행되는지 확인하곤 하는데 굳이 카운트를 위한 변수를 만들 필요없이 이걸 사용하면 될 것 같다. 

이것도 짱 신기. 귀여운 기능이다.

인자로 전달한 문자열: {카운트} 이렇게 된다. 

 

console.time()

이것도 위 count()처럼 유용할 것 같다. 대략적인 성능 분석할 때 사용할 수 있지 않을까 싶다. 특정 함수가 실행되는데 얼마나 걸리는지 등. 

time()로 시작해서 timeEnd()로 끝내면 그동안의 시간을 측정해준다. 인자로 타이머 이름을 전달하면 그걸로 짝을 지어 구분해준다. timeLog(타이머 이름, 로그 내용)으로 로그도 찍을 수 있다. console.time(타이머 이름)으로 타이머 이름에 해당하는 타이머 객체를 만들고 timeEnd(타이머 이름)으로 객체를 삭제한다. timeLog는 객체가 살아있는 동안에만 쓸 수 있다.

 

timeEnd 다음에 timeLog를 하면 그 객체가 없다고 나온다.

이렇게 써야 된다.

 

console.group()

console.group(그룹 이름)과 console.groupEnd()사이에 쓴 console.log들을 토글 그룹으로 묶어서 보여준다. groupCollapsed()는 group()이랑 같은 기능인데 접은 상태로 보여준다. 

 

console.trace()

이건 코드가 동작하는 방식을 알아볼 때 유용한 메소드다. 코드가 어디서 실행됐는지 추적해서 알려준다. 대박임

참고: https://developer.mozilla.org/en-US/blog/learn-javascript-console-methods/

trace()로 나온 결과를 해석하면 다음과 같다. 

1. trace() 메소드가 22번 라인, example이라는 함수에서 실행되었다.
2. example 함수는  6번 라인, one이라는 함수에서 실행되었다.
3. randomeChoince라는 함수, 14라인에서 one 함수를 호출했다.

console.clear()

콘솔창에 있는거 다 지우기! 사실 이건 그냥 브라우저 콘솔창에서 제공하는 버튼 누르는 게 더 편할 듯 ㅎㅎ..