page-spy-web

Intro

PageSpy is a tool for debugging projects on platforms such as Web, React Native, Mini Programs, and HarmonyOS apps.

It wraps native APIs: when those methods run, it filters and transforms the arguments, serializes them in a standard format, and sends them to the debugging client. The client renders the data in an interface similar to your local devtools console.

Why PageSpy?

A picture is worth a thousand words.

When to use

PageSpy shines in any scenario where local console debugging is not possible! Let’s explore some use cases:

• Local Debugging of H5 and Webview Applications: Mobile screens are small, traditional debugging panels are awkward to use, render poorly, and often truncate logs.

• Remote Work and Cross-Region Collaboration: Email, phone, and video calls are slow; error details get lost, which leads to misunderstandings and wrong conclusions.

• Troubleshooting White Screen Issues on User Terminals: Dashboards and log pipelines need strong business and stack knowledge, so pinpointing the issue on a user’s device is slow.

PageSpy is built for teams in situations like these.

How to use

To keep your data under your control and make self-hosting straightforward, we ship ready-made deployment options. Pick whichever fits your environment.

Option 1: Deploy with Node.js

Video tutorial:

yarn global add @huolala-tech/page-spy-api@latest

# if you use npm

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

After installation, run page-spy-api in the terminal to start the service. When it is up, open http://localhost:6752 in your browser. After local testing, deploy the same setup to your server.

Option 2: Deploy with Docker

Video tutorial:

docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest

When the container is running, open http://localhost:6752 in your browser. After local testing, deploy the same setup to your server.

Contributing

See Contributing.

FAQ

See the FAQ.