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

> Clean Markdown view of GeekNews topic #25375. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=25375](https://news.hada.io/topic?id=25375)
- GeekNews Markdown: [https://news.hada.io/topic/25375.md](https://news.hada.io/topic/25375.md)
- Type: show
- Author: [ohah173](https://news.hada.io/@ohah173)
- Published: 2025-12-27T21:15:31+09:00
- Updated: 2025-12-27T21:15:31+09:00
- Original source: [github.com/ohah](https://github.com/ohah/chrome-remote-devtools)
- Points: 2
- Comments: 0

## Topic Body

https://tech.kakao.com/posts/617  
  
작년에 카카오 발표 현장에 우연찮게 간적이 있었는데 언젠간 나도 만들어봐야지란 생각만 막연하게 가지고 있었다가,   
  
https://techblog.woowahan.com/23343/  
  
최근에 배민에서도 유사한걸 개발했길래 나도 이제 한번..? 하면서 개발 해보았습니다.  
  
실제 사용시 로그를 보려면 저장소에 있는 inspector 페이지를 빌드하여 배포하시거나, 웹소켓 서버를 활용하지 않고,  로그로만 확인하실거라면 [플레이그라운드](https://ohah.github.io/chrome-remote-devtools/ko/examples/index.html) 에서 확인하셔도 됩니다.  
  
그리고 제공된 [웹서버](https://www.npmjs.com/package/@ohah/chrome-remote-devtools-server)를 실행하고, 클라이언트 쪽에는   
[클라이언트](https://www.npmjs.com/package/@ohah/chrome-remote-devtools-client) 코드를 아래와 같이 넣어주시면 됩니다  
  
```javascript  
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  
  
간단한 동작 및 기능은 위 링크에서 확인 하실 수 있습니다.  
  
주의 사항  
절대 프로덕션 레벨에서 사용하지 마십시오

## Comments



_No public comments on this page._