다양한 console 메서드 활용하여 디버깅 하기

javascript로 디버깅 시 무지성 console.log()를 찍어가면서 확인하곤 한다. 하지만 이번에 다양한 console 메서드에 대해서 알게 되었고 적극적으로 활용해보기 위해 정리를 하려고 한다.

console.count()

함수나 코드가 실행된 횟수를 계산할 수 있다.

console.count();
// default: 1
console.count();
// default: 2

다음과 같이 응용해서 사용이 가능하다.

function plus(a, b) {
  console.count("plus called");
  return a + b;
}

plus(1,1);
// plus called : 1
plus(2,2);
// plus called : 2

위와 같이 사용하면 함수가 예상치 못한 상황에서 호출이 되었는지 확인이 가능하다.
React 컴포넌트 안에서 사용한다면 렌더링 되는 횟수를 확인해 볼 수 있다.

초기화를 하고싶다면
console.countReset("plus called")
을 사용하여 count를 0으로 되돌릴 수 있다.

console.time()

하나 또는 여러개의 작업 소요시간을 확인할 수 있다.
console.timeEnd(), console.timeLog()와 같이 사용한다.

console.time();
calculate();
console.timeEnd();
// default: 300.10000002384185791ms

첫번째 인자에 label을 지정해 줌으로써 동시에 여러개를 테스트 할때 쉽게 식별이 가능하다.

console.time("calculate time");
calculate();
console.timeEnd("calculate time");
// calculate time: 300.60000002384186ms

console.time("calculate2 time");
calculate2();
console.timeEnd("calculate2 time");
// calculate2 time: 300.89999997615814ms

console.timeLog()를 사용하면 time과 timeEnd 중간에 시간을 기록할 수 있다.

console.time("calculate time");
calculate();
console.timeLog("calculate time")
calculate();
console.timeEnd("calculate time");
// calculate time: 303.89999997615814ms
// calculate time: 606.8999999761581ms

console.assert()

작성하는 조건이 false인 경우에만 에러 메세지를 출력한다.

console.assert(3 === 1);
// 어설션에 실패함: console.assert

두번째 인자로 에러 메세지를 설정 할 수 있다.

console.assert(3 === 1, "이것은 오류입니다.");
// 어설션에 실패함: 이것은 오류입니다.

console.table()

객체나 배열을 테이블 형식으로 시각화 할 수 있다.

const users = [
  {
    name: "hong",
    age: 10,
  },
  {
    name: "gang",
    age: 20,
  },
];

console.table(users);

테이블에 표시할 열만 선택할 수도 있다.

const users = [
  {
    name: "hong",
    age: 10,
  },
  {
    name: "gang",
    age: 20,
  },
];

console.table(users,["name"]);

---

참고 자료 : https://www.youtube.com/watch?v=SmKM-8Q0Egw