Chrome DevTools Debugger가 Breakpoint에서 Freeze 되는 문제 해결하기
Problem
React 앱을 개발하다가 Chrome DevTools에 breakpoint(중단점)를 걸면 디버거가 멈춰버리는 현상이 발생한다. 스택 트레이스는 표시되지만 이후로는 아무것도 클릭할 수 없고, F8 키로 Resume(재개)도 되지 않는다. 페이지 새로고침 후에야 다시 사용할 수 있지만, 매번 반복되면 디버깅 작업이 매우 힘들어진다.
특히 오래된 React 코드를 최신 의존성으로 업그레이드하는 과정에서 자주 나타난다. Page 패널에 localhost:3000 아래에 두 개의 폴더가 보이는 상황에서 Ignore list(무시 목록)에 소스 폴더를 추가해도 문제가 해결되지 않는다.
Background
Chrome DevTools는 웹팩이나 Vite 같은 번들러가 생성한 source map(소스 맵)을 이용해 빌드된 코드와 원본 코드를 연결한다. React 개발 서버를 실행하면 보통 static/js 폴더에 번들 파일이 생성되는데, IDE의 실제 src 폴더도 동시에 표시되어 혼란이 생긴다.
breakpoint를 걸면 DevTools가 스택을 계산하고 변수 상태를 분석하는 과정에서 내부 버그가 발생할 수 있다. 특히 Chrome 127 버전대에서 이 문제가 자주 보고됐으며, 브라우저의 디버깅 엔진과 React 개발 환경 사이의 호환성 이슈로 추정된다.
Solution
1. Chrome 브라우저를 최신 버전으로 업데이트하기
대부분의 사용자가 Chrome 128 버전으로 업데이트한 후 문제를 해결했다. 이는 DevTools 내부의 디버깅 엔진 버그가 수정된 결과로 보인다.
# Mac 사용자의 경우
brew upgrade --cask google-chrome
# 또는 Chrome 설정 > About Chrome에서 자동 업데이트
업데이트 후 DevTools를 완전히 닫고 다시 열어야 효과가 나타난다.
2. Ignore list(무시 목록) 제대로 설정하기
DevTools의 Sources 패널에서 오른쪽 클릭 후 ‘Add folder to ignore list’를 선택한다. misleading한 src 폴더(C:/Dev/…/src)를 추가하면 디버거가 실제 번들 파일만 집중한다.
3. DevTools 설정 최적화
DevTools Settings(설정) > Experiments 탭에서 다음 옵션을 확인한다:
- ‘Disable cache’ 해제
- ‘Enable JavaScript source maps’ 활성화
또한 불필요한 Extension(확장 프로그램)을 모두 꺼두는 것이 좋다. 특히 React Developer Tools와 충돌하는 다른 디버깅 확장 프로그램이 있는지 확인해야 한다.
4. 대안 디버거 사용
문제가 지속되면 VS Code의 Debugger for Chrome 확장이나 WebStorm의 내장 디버거를 사용하는 것도 효과적이다. 브라우저 DevTools에만 의존하지 않는 접근법이다.
Deep Dive
이 문제는 DevTools가 source map을 파싱하고 여러 개의 workspace 폴더를 동시에 관리할 때 메모리나 이벤트 루프에서 병목이 발생하면서 나타난다. 특히 React의 Hot Module Replacement(HMR)와 함께 사용할 때 더 자주 발생한다.
프로덕션 환경에서는 source map을 제거하기 때문에 이런 문제가 거의 나타나지 않는다. 개발 환경에서는 ‘cheap-module-source-map’ 대신 ’eval-cheap-module-source-map’ 같은 source map 옵션을 webpack에 설정해보는 것도 도움이 된다.
가장 좋은 예방책은 Chrome Canary나 Edge Dev 버전을 병행 사용하는 것이다. 새로운 DevTools 기능을 미리 테스트할 수 있고, 안정 버전의 버그를 조기에 회피할 수 있다.
Conclusion
Chrome DevTools Debugger freeze 문제는 대부분 브라우저 업데이트로 해결된다. Chrome 128 이상으로 업데이트한 후에도 문제가 지속된다면 Ignore list 설정과 불필요한 확장 프로그램 비활성화를 순서대로 시도해보자.
디버깅 도구는 개발 생산성의 핵심이다. 한 가지 도구에만 의존하지 않고 여러 환경을 함께 사용하는 습관을 들이면 비슷한 문제를 더 빠르게 해결할 수 있다.