크롬 개발자도구 조건부 중단점 걸기

웹 개발을 하다보면 브라우저에 디버깅의 대부분은 브라우저에서 이루어 진다. 프론트엔드의 경우 99% 비율로 브라우저에서 디버깅을 하게 된다.

 

좀 더 손쉬운 디버깅을 위해 라인 넘버를 클릭해 중단점을 걸어 디버깅을 진행하는 방법이 있다.

하지만 반복문의 특정 인덱스에 대한 디버깅이나 비동기로 실행되는 코드가 특정 값을 반환하는 경우에만 디버깅을 하는 것은 위 방식으로는 상당히 번거롭다.

좀 더 나은 방법으로는 코드에 debugger 키워드를 활용하여 원하는 조건과 함께 작성하는 것이다. 다음과 같이 사용해 볼 수 있다.

// 1. 반복문
for (let i = 0; i < 100; i++) {
  if (debuggingCondition) {
    debugger;
  }
  
  ...someLogicHere...
}

// 2. 비동기 통신
fetch(someAPI).then((res) => {
  if (debuggingCondition) {
    debugger;
  }
  ...someLogicHere...
}

 

이 방식을 통해 원하는 조건에서 코드를 중단 시키는 것이 가능해졌다. 하지만 디버깅을 위해선 코드를 수정할 수 있어야 하고, 수정하더라도 나중에 다시 복구해야하므로 번거롭다.

 

이 경우 크롬 개발자 도구의 조건부 중단점 기능을 활용해볼 수 있다. 방식은 위에서 작성한 것과 유사하다.

 

1. 조건부 중단점을 추가할 라인넘버를 우클릭한 후 "Add conditional breakpoint"를 선택한다.

 

 

2. 표시되는 입력 폼에 중단할 조건을 입력한다.

 

 

3. 엔터를 치면 다음과 같이 반만 칠해진 빨간 원이 나타난다.

 

 

4. 페이지를 새로고침하면 추가한 조건에서 중단점이 동작한 것을 확인할 수 있다.

 

 

 

 

조건부 중단점을 사용하면 원래 코드를 건드리지 않고도 깔끔하게 원하는 지점에서 코드를 중단할 수 있다.