핵심 요약
우아한형제들이 DevTools Protocol을 활용한 원격 디버깅 플랫폼을 개발해 웹뷰/웹페이지의 테스트 당시 환경과 로그를 기록하고 재현 가능하게 구현했습니다.
구현 방법
- Chrome DevTools Protocol(CDP) 기반의 원격 디버깅 UI(devtools_app.html)와 서버 간의 연동 구성
- 웹뷰/웹페이지의 네트워크, 콘솔, DOM 정보를 CDP 포맷으로 수집하고 WebSocket으로 전달
- 기록방 생성 시 특수 URL 발급으로 이슈 상황을 공유하고 재현 가능한 디버깅 기록을 저장
- 기록된 CDP 데이터를 devtools_app이 로드해 당시 화면과 흐름을 재현
주요 결과
- QA·디자인·개발 등 다양한 직군의 이슈 제보가 쉬워져 협업 속도가 향상
- 기록방 URL을 열면 익숙한 DevTools 화면에서 당시 상황의 Console 로그, Network 요청, DOM 흐름을 재현 가능
- 프로젝트 내 디버깅 허들을 낮추고 문제 해결 시간을 단축하는 환경을 제공
