Show GN: 원격 크롬 디버거 chrome-remote-devtools

https://tech.kakao.com/posts/617

작년에 카카오 발표 현장에 우연찮게 간적이 있었는데 언젠간 나도 만들어봐야지란 생각만 막연하게 가지고 있었다가,

https://techblog.woowahan.com/23343/

최근에 배민에서도 유사한걸 개발했길래 나도 이제 한번..? 하면서 개발 해보았습니다.

실제 사용시 로그를 보려면 저장소에 있는 inspector 페이지를 빌드하여 배포하시거나, 웹소켓 서버를 활용하지 않고, 로그로만 확인하실거라면 플레이그라운드 에서 확인하셔도 됩니다.

그리고 제공된 웹서버를 실행하고, 클라이언트 쪽에는
클라이언트 코드를 아래와 같이 넣어주시면 됩니다

import { initCDPClient } from '@ohah/chrome-remote-devtools-client';  
  
useEffect(() => {  
  initCDPClient('wss://your-server.com', {  
    enable: true, // Enable rrweb session recording  
  });  
}, []);  

데스크탑 앱으로 배포 하기 위해 타우리 설정도 해놓았습니다만 아직 배포는 하지 않았습니다.

웹소켓 서버를 통해 연결하여 실시간으로 확인하거나, 사용자가 로그를 건네주면 해당 로그파일을 크롬 데브툴 UI를 통해 확인해보실 수 있습니다.

원격 데브툴 특성상 지원하기 힘든 메모리나 성능 측정 부분은 제외하였고,
간단한 Elements, Console, Network, LocalStorage, SessionStorage, Cookie 정도 확인 가능하며

rr-web기능을 크롬 데브툴 디버거 안의 탭 안에 넣어서 사용자 화면 액션을 크롬 데브툴 안에서 볼 수 있게 했습니다.

https://ohah.github.io/chrome-remote-devtools/ko/examples/index.html

간단한 동작 및 기능은 위 링크에서 확인 하실 수 있습니다.

주의 사항
절대 프로덕션 레벨에서 사용하지 마십시오