Repolode
投稿する
HuolalaTech

HuolalaTech/page-spy-web

PageSpy SDKと連携し、リモートデバイス上のページのコンソール出力やデータを確認できる、セルフホスト対応のリモートデバッグ用Webクライアント。

GitHub で見る公式サイト
スター
5,633
フォーク
357
未解決の Issue
53
最終コミット
2 か月前

これは何？

PageSpyは、Webページ、React Nativeアプリ、ミニプログラム、HarmonyOSアプリ向けのリモートデバッグツールです。クライアント側SDKがネイティブのconsoleや関連APIをラップして引数をシリアライズし、デバッグクライアントに送信します。デバッグクライアントでは、ローカルブラウザーのDevToolsコンソールに似たインターフェースで内容を確認できます。

このリポジトリは、システムのWebクライアントとサーバー側を提供します。@huolala-tech/page-spy-apiパッケージを使ってNode.jsでローカル実行するか、Dockerでデプロイできます。サービスはポート6752で公開されます。ログとデータはマウントしたディレクトリに保存されるため、自社のインフラ上で運用できます。

モバイルWebView内でのデバッグや、地域をまたいだ不具合再現の連携、エンドユーザーの端末で発生する白画面の原因調査など、ローカルのDevToolsを使えない場面を想定しています。

主な機能

  • 01Web、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と連携し、リモートデバイス上のページのコンソール出力やデータを確認できる、セルフホスト対応のリモートデバッグ用Webクライアント。 PageSpyは、Webページ、React Nativeアプリ、ミニプログラム、HarmonyOSアプリ向けのリモートデバッグツールです。クライアント側SDKがネイティブのconsoleや関連APIをラップして引数をシリアライズし、デバッグクライアントに送信します。デバッグクライアントでは、ローカルブラウザーのDevToolsコンソールに似たインターフェースで内容を確認できます。
page-spy-web は無料で使えますか？ライセンスは？
page-spy-web は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
page-spy-web は今もメンテナンスされていますか？
半年以内に更新あり。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 の数値は毎日更新されます。

関連プロジェクト