Home

Awesome

<div align="center"> <img src="./logo.svg" height="100" /> <h1>Page Spy</h1>

Release license Build Status <br /> Browser SDK version Wechat SDK version Alipay SDK version UniApp SDK version Taro SDK version Harmony SDK version API Version <br /> Deploy with Node Deploy with Docker Deploy with Baota

<a href="https://www.producthunt.com/posts/pagespy?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-pagespy" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=429852&theme=light" alt="PageSpy - Remote&#0032;debugging&#0032;as&#0032;seamless&#0032;as&#0032;local&#0032;debugging&#0046; | Product Hunt" height="36" /></a> <a href="https://news.ycombinator.com/item?id=38679798" target="_blank"><img src="https://hackernews-badge.vercel.app/api?id=38679798" alt="PageSpy - Remote&#0032;debugging&#0032;as&#0032;seamless&#0032;as&#0032;local&#0032;debugging&#0046; | Hacker News" height="36" /></a>

English | 中文 | 日本語

</div>

Intro

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

Based on encapsulation of native web APIs, it filters and transforms the parameters of native methods when called, and converts into messages with specific format for consumption by the debugger client. The debugger presents ui in an interactive devtools-like for easy viewing after receives the message data.

Home

Why is PageSpy?

A picture is worth a thousand words.

Why is PageSpy

When should I use?

<u>It's PageSpy show time whenever you can't debug code with local devtools!</u> Let's see the following instances:

The commonality among these issues is that developers cannot view runtime information as easily as they can using the console.

To address this, PageSpy provides a live view of the project for technical personnel to inspect on the debugging side. In remote collaborative scenarios, testers no longer need to frequently provide fault information to technical personnel through text, screenshots, voice messages, or screen recordings.

How to use?

In order to ensure data security and facilitate your usage, we offer comprehensive, out-of-the-box deployment solutions. Developers can choose any deployment method according to their own situations.

Option 1: deploy by node

Video tutorial:

<a href="https://www.youtube.com/watch?v=5zVnFPjursQ" target="_blank"><img src="./.github/assets/video-node-en.jpg" width="320" /></a>

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

# if you use npm

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

After the download is complete, you can directly execute page-spy-api in the command line to start the service. After the startup is complete, visit http://localhost:6752 on the browser. Once local testing is complete, you can deploy it to the server.

Option 2: deploy by docker

Video tutorial:

<a href="https://www.youtube.com/watch?v=AYD84Kht5yA" target="_blank"><img src="./.github/assets/video-docker-en.jpg" width="320" /></a>

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

After the startup is complete, visit http://localhost:6752 on the browser. Once local testing is complete, you can deploy it to the server.

How to contribute?

Click to see the Contributing.

FAQ

Click to see the FAQ.

Community

Join us on our Official Discord Server!

Roadmap

Click to see the Roadmap.