네이티브 DevTools로 HTML/CSS/JS Repl 검사하기

Replit이 웹 페이지를 더 쉽게 검사하고 디버깅할 수 있는 네이티브 DevTools를 출시했다. 기존 브라우저 DevTools는 중첩된 웹뷰 iframe 검사가 복잡하고, 모바일 지원이 미흡하며, 일부 교육 환경에서 접근이 제한되는 단점이 있었다.

이제 모든 웹뷰가 포함된 Repl에서 렌치 아이콘을 클릭해 Console과 DOM을 즉시 확인할 수 있다.

이 기능은 모바일 환경에서 뛰어난 오픈소스 솔루션인 Eruda를 기반으로 구축되었다. 특히 Chrome DevTools protocol을 JavaScript로 구현한 chobitsu를 사용하여 네트워크 트래픽 검사 등 높은 유연성을 확보했다.

보안을 위해 same origin policy를 준수하도록 __devtools_wrapper.html이라는 특수 파일을 통해 DevTools를 호스팅한다. 또한, 페이지의 스크립트가 실행되기 전에 DevTools가 먼저 로드될 수 있도록, HTML을 먼저 fetch한 뒤 DevTools를 주입하고 iframe에 쓰는 방식을 채택해 타이밍 문제를 해결했다.