#3-2. DevTools 프론트엔드 연동 25.12.20 ~ 25.12.22

#Chrome DevTools 프론트엔드를 가져오다

CDP 메시지가 잘 오가는 건 확인했는데, JSON 로그만 봐서는 감흥이 없다. 진짜 크롬 개발자도구 UI에서 콘솔 로그가 찍히고 네트워크 요청이 보여야 "이거 되는구나" 하는 실감이 난다.

다행히 Chrome DevTools 프론트엔드는 Chromium 프로젝트의 일부이며, 공식 ChromeDevTools/devtools-frontend 저장소에 공개돼 있다. CRD에서는 그 포크인 ohah/devtools-frontend를 서브모듈로 가져와 Inspector에 iframe으로 임베드하는 방식을 택했다. CRD의 서브모듈 설정에서도 사용하는 포크를 확인할 수 있다.

카카오나 배민도 같은 접근을 했다. devtools-frontend를 빌드해서 정적 파일로 서빙하고, WebSocket URL을 파라미터로 넘기면 CDP 연결이 맺어지는 구조다. 다 그 나물에 그 밥이다.

#Inspector 앱 구조: FSD + TanStack Router

Inspector는 DevTools 프론트엔드를 감싸는 껍데기지만, 그냥 iframe 하나 띄우는 게 아니라 클라이언트 목록 관리, 설정, 리플레이 같은 자체 기능이 필요했다.

구조는 FSD(Feature-Sliced Design)를 적용했다. 처음 써보는 아키텍처였는데, 기능 단위로 폴더를 나누는 게 직관적이라 금방 적응했다. 라우팅은 TanStack Router를 썼다. React Router 대신 이걸 쓴 이유는 솔직히 써보고 싶어서다. 타입 안전한 라우팅이라는 게 매력적이었고, 실제로 쓰니까 파라미터 자동완성이 나와서 편했다.

스타일링은 Tailwind CSS. 이건 고민할 것도 없었다.

#devtools-frontend 빌드의 고통

devtools-frontend를 가져와서 빌드하는 건 생각보다 귀찮았다. Chromium 빌드 시스템이 복잡하기로 유명한데, devtools-frontend도 그 생태계의 일부라 gn이나 autoninja 같은 빌드 도구가 필요했다.

나중에 (PR #3, devtools-frontend 레포) CDP 프로토콜 타입을 추가하거나, 지원하지 않는 패널을 숨기거나(PR #2), 커스텀 패널을 넣으려면(PR #4) devtools-frontend 코드를 직접 수정해야 했는데, 수정할 때마다 빌드가 꽤 오래 걸렸다. 이건 나중에 rebase 작업(PR #44)까지 해야 하는 복병이 되었다.

#iframe 예제와 e2e 테스트

12월 21일에는 iframe 예제(PR #6)와 e2e 테스트(PR #7)를 추가했다. iframe 안에서 CRD 클라이언트가 제대로 동작하는지 확인하는 예제인데, 이건 나중에 문서 사이트의 데모 플레이그라운드를 만들 때 기반이 됐다.

e2e 테스트는 Playwright로 작성했다. 클라이언트를 붙인 테스트 페이지를 열고, Inspector에서 콘솔 로그가 뜨는지, 네트워크 요청이 보이는지 확인하는 기본적인 시나리오다. 이 시점부터 테스트를 넣기 시작한 건 나중에 리팩토링할 때 큰 도움이 됐다.

12월 22일에는 로컬스토리지 감지(PR #9)와 iframe e2e 테스트(PR #8)를 보강했다. 로컬스토리지 변경을 실시간으로 감지해서 Inspector에 반영하는 기능인데, StorageEvent를 리스닝하면 될 줄 알았는데 같은 탭에서는 이벤트가 안 뜨더라. setItem을 프록시해야 했다.

#카카오와 배민의 차이, 그리고 나의 차이

카카오 발표에서는 chii를 쓰는 방식이었고, 배민은 자체 CDP 구현이었다. 나는 배민 쪽에 더 가까운 접근을 택했지만, Inspector 앱 자체를 Tauri로 감싸서 데스크톱 앱으로도 만들 계획이 있었다. 그래서 처음부터 Inspector를 별도 React 앱으로 만들고, DevTools는 iframe으로 임베드하는 구조를 잡은 거다.

이 구조 덕분에 나중에 Tauri 데스크톱 앱(PR #28)을 만들 때 Inspector 코드를 거의 수정하지 않고 그대로 쓸 수 있었다.

#3일차의 상태

프로젝트 시작 3일째, 기본적인 원격 디버깅이 동작하는 상태가 됐다. 웹 페이지에 클라이언트 스크립트를 삽입하고, Inspector를 열면 콘솔/네트워크/DOM/스토리지가 보인다. DevTools UI가 크롬 개발자도구 그 자체니까, 익숙한 인터페이스에서 원격 디버깅이 되는 거다.

이 시점에서 "이거 끝인가?" 하는 생각이 잠깐 들었다. 하지만 배민 블로그에서 본 "기록방 URL로 당시 콘솔/네트워크/DOM을 다시 볼 수 있다"는 기능이 머릿속에서 안 지워졌다. 그게 다음 단계로 이어졌다.