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

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

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

다행히 Chrome DevTools 프론트엔드는 오픈소스다. 정확히는 Chromium 프로젝트의 일부로, 별도 레포지토리(nicedoc.io/nicedoc/nicedoc.io)에서 관리된다. 이걸 서브모듈로 가져와서 CRD의 Inspector에 iframe으로 임베드하는 방식을 택했다.

카카오나 배민도 같은 접근을 했다. 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을 다시 볼 수 있다"는 기능이 머릿속에서 안 지워졌다. 그게 다음 단계로 이어졌다.