Repolode
제출하기
HuolalaTech

HuolalaTech/page-spy-web

PageSpy SDK와 연동해 원격 기기에서 실행 중인 페이지의 콘솔 출력과 데이터를 보여 주는 자체 호스팅 가능한 원격 디버깅 웹 클라이언트입니다.

GitHub에서 보기웹사이트
스타
5,635
포크
357
열린 이슈
53
마지막 커밋
2개월 전

어떤 프로젝트인가요?

PageSpy는 웹 페이지, React Native 앱, 미니 프로그램, HarmonyOS 앱을 위한 원격 디버깅 도구입니다. 클라이언트 SDK가 기본 console 및 관련 API를 감싸 인자를 직렬화한 뒤 디버깅 클라이언트로 전송하면, 클라이언트는 로컬 브라우저 devtools 콘솔과 비슷한 인터페이스에 내용을 표시합니다.

이 저장소에는 해당 시스템의 웹 클라이언트와 서버가 포함되어 있습니다. @huolala-tech/page-spy-api 패키지를 사용해 Node.js로 로컬에서 실행하거나, 서비스를 6752 포트에 노출하는 Docker로 배포할 수 있습니다. 로그와 데이터는 마운트한 디렉터리에 저장되므로 자체 인프라에서 서비스를 운영할 수 있습니다.

모바일 webview 내부처럼 로컬 devtools를 사용할 수 없는 상황에서의 디버깅, 여러 지역에 걸친 버그 재현 조율, 최종 사용자 기기에서 발생한 화이트 스크린의 원인 파악 등에 적합합니다.

핵심 기능

  • 01웹, React Native, 미니 프로그램, HarmonyOS용 SDK에서 기본 console 및 관련 API를 감쌉니다.
  • 02원격 로그를 로컬 devtools 콘솔과 비슷한 인터페이스에 표시합니다.
  • 03npm을 통한 Node.js 실행 또는 6752 포트를 사용하는 Docker 배포를 지원합니다.
  • 04로그와 데이터를 자체 서버에 보관합니다.

활용 사례

  • 로컬 devtools를 사용하기 어려운 휴대폰의 H5 페이지나 webview 디버깅
  • 여러 지역에 있는 팀원이 버그를 재현하고 살펴볼 수 있도록 지원
  • 최종 사용자 기기에서 보고된 화이트 스크린 문제 조사

빠른 시작

  1. 1

    npm 또는 yarn을 사용해 API 서비스를 전역으로 설치합니다

    npm install -g @huolala-tech/page-spy-api@latest
  2. 2

    터미널에서 서비스를 시작합니다

    page-spy-api
  3. 3

    브라우저에서 localhost의 포트 6752로 접속해 클라이언트를 엽니다

사용 전 알아둘 점

  • 직접 호스팅하려면 Node.js 서비스 또는 Docker 컨테이너를 직접 실행해야 합니다.
  • 원격 디버깅을 하려면 디버깅할 페이지나 앱에 해당하는 PageSpy SDK를 추가해야 합니다.

포함된 컬렉션

셀프 호스팅 앱

토픽

#remote-debugging#console#devtools#webview#self-hosted#javascript#mini-program#debugger#remote-control

자주 묻는 질문

page-spy-web은(는) 무엇인가요?
PageSpy SDK와 연동해 원격 기기에서 실행 중인 페이지의 콘솔 출력과 데이터를 보여 주는 자체 호스팅 가능한 원격 디버깅 웹 클라이언트입니다. PageSpy는 웹 페이지, React Native 앱, 미니 프로그램, HarmonyOS 앱을 위한 원격 디버깅 도구입니다. 클라이언트 SDK가 기본 console 및 관련 API를 감싸 인자를 직렬화한 뒤 디버깅 클라이언트로 전송하면, 클라이언트는 로컬 브라우저 devtools 콘솔과 비슷한 인터페이스에 내용을 표시합니다.
page-spy-web은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
page-spy-web은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
page-spy-web은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. page-spy-web의 마지막 커밋은 2026년 9월 18일입니다.
page-spy-web은(는) 어디에 사용할 수 있나요?
로컬 devtools를 사용하기 어려운 휴대폰의 H5 페이지나 webview 디버깅 여러 지역에 있는 팀원이 버그를 재현하고 살펴볼 수 있도록 지원 최종 사용자 기기에서 보고된 화이트 스크린 문제 조사
page-spy-web는 어떻게 설치하나요?
npm 또는 yarn을 사용해 API 서비스를 전역으로 설치합니다: npm install -g @huolala-tech/page-spy-api@latest 터미널에서 서비스를 시작합니다: page-spy-api 브라우저에서 localhost의 포트 6752로 접속해 클라이언트를 엽니다
page-spy-web은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/HuolalaTech/page-spy-web

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트